/* === tokens === */
:root {
	/* brand */
	--color-brand:           #ffea00;   /* devBar accent */
	--color-brand-ink:       #000000;

	/* surfaces */
	--surface-page:          #ffffff;
	--surface-sidebar:       #f5f5f5;
	--surface-sidebar-hover: #d9d9d9;
	--surface-sidebar-active:#e1e1e1;
	--surface-footer:        #f1f1f1;
	--surface-row-hover:     #d9edf7;
	--surface-header-float:  rgba(237, 237, 237, 0.9);
	--surface-disabled:      #d9d9d9;   /* same value as sidebar-hover, different meaning */

	/* text */
	--text-default:          #212529;
	--text-muted:            #a7a7a7;
	--text-muted-strong:     #8f8f8f;
	--text-muted-soft:       #b0b0b0;
	--text-caption:          #9c9c9c;
	--text-footer:           #818181;
	--text-disabled-row:     #b4b4b4;
	--text-form:             #495057;

	/* borders */
	--border-default:        #ced4da;
	--border-soft:           #dee2e6;
	--border-faint:          rgba(237, 237, 237, 0.9);

	/* state / shadow */
	--color-required:        #dc3545;
	--shadow-elevated:       0px 0px 10px 0px rgba(0, 0, 0, 0.20);
	--shadow-datepicker:     0px 0px 10px #c9c9c9;

	/* state colors — Bootstrap-ish bg + text pairs used by toasts,
	   audit-log severity rows, password validator hints, etc. */
	--state-success-bg:      #d4edda;
	--state-success-text:    #3c763d;
	--state-warning-bg:      #fff3cd;
	--state-warning-text:    #856404;
	--state-danger-bg:       #f8d7da;
	--state-danger-text:     #a94442;
	--state-danger-strong:   #721c24;
	--state-notice-bg:       #d1ecf1;
	--state-info-bg:         #fffbea;

	/* extras */
	--text-muted-bs:         #6c757d;        /* Bootstrap text-muted */
	--surface-alt-row:       #f8f9fa;        /* cards alternating-row bg */

	/* dimensions */
	--sidebar-width:         200px;
	--masthead-height:       55px;
	--radius-sm:             0.15rem;
	--radius-default:        0.25rem;

	/* typography */
	--font-size-caption:     0.8rem;
	--font-size-info:        0.8em;
	--font-size-xs-btn:      0.6rem;
}
/* === /tokens === */


/* ============================================================
   v9 DESIGN TOKENS — pasted verbatim from
   .claude/design/02-seasons-v9-responsive.html (Phase 2 of BS5 migration).
   These are loaded ALONGSIDE the existing tokens above (which stay as
   fallbacks during the migration). Phase 4+ pages start consuming
   these names; Phase 6 cleanup eventually retires the old ones.
   DO NOT modify values here — they must mirror the canonical mockup.
   ============================================================ */
:root {
  --bg:          #FAFAFA;
  --surface:     #FFFFFF;
  --surface-2:   #F4F4F5;
  --surface-hov: #F9F9FB;
  --surface-sb:  #FBFBFC;       /* sidebar bg */

  --ink:         #09090B;
  --ink-soft:    #3F3F46;
  --ink-mute:    #71717A;
  --ink-faint:   #A1A1AA;

  --line:        #E4E4E7;
  --line-strong: #D4D4D8;

  --accent:      #2563EB;
  --accent-hov:  #1D4ED8;
  --accent-bg:   #EFF4FF;

  --green:       #15803D;
  --green-bg:    #DCFCE7;
  --amber:       #B45309;
  --amber-bg:    #FEF3C7;
  --red:         #B91C1C;
  --red-bg:      #FEE2E2;

  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  --sidebar-w: 220px;
  --sidebar-w-collapsed: 60px;

  /* Inverse — primary button / brand logo. In light mode, ink-on-light. */
  --inv-bg:      #09090B;
  --inv-fg:      #FFFFFF;
  --inv-bg-hov:  #18181B;

  color-scheme: light;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --bg:          #0A0A0B;
  --surface:     #131316;
  --surface-2:   #1C1C20;
  --surface-hov: #18181B;
  --surface-sb:  #0E0E11;

  --ink:         #FAFAFA;
  --ink-soft:    #D4D4D8;
  --ink-mute:    #A1A1AA;
  --ink-faint:   #71717A;

  --line:        #27272A;
  --line-strong: #3F3F46;

  --accent:      #60A5FA;
  --accent-hov:  #93C5FD;
  --accent-bg:   rgba(96, 165, 250, 0.12);

  --green:       #4ADE80;
  --green-bg:    rgba(34, 197, 94, 0.12);
  --amber:       #FBBF24;
  --amber-bg:    rgba(245, 158, 11, 0.12);
  --red:         #F87171;
  --red-bg:      rgba(239, 68, 68, 0.12);

  --state-success-text: var(--green);
  --state-danger-text:  var(--red);

  /* Inverse flips: primary buttons become light-on-dark inverted */
  --inv-bg:      #FAFAFA;
  --inv-fg:      #09090B;
  --inv-bg-hov:  #E4E4E7;

  color-scheme: dark;
}
/* === /v9 tokens === */


/* devBar utils */
#devBar {
	background-image: linear-gradient(135deg, var(--color-brand) 25%, var(--color-brand-ink) 25%, var(--color-brand-ink) 50%, var(--color-brand) 50%, var(--color-brand) 75%, var(--color-brand-ink) 75%, var(--color-brand-ink) 100%);
	background-size: 20.00px 20.00px;
	top: 0px;
	position: fixed;
	z-index: 999999;
	width: 100%;
	height: 10px;
	line-height: 0em;
	xdisplay: none;
}

#devBar #bootstrapWindowSize div {
	background-color: var(--color-brand);
	color: var(--color-brand-ink);
	float: left;
	padding-left: 4px;
	padding-right: 4px;
	font-size: 10px;
	line-height: 10px;
	height: 10px;
}

#moreFileInfo {
	background-color: var(--color-brand-ink);
	color: var(--color-brand);
	text-transform: uppercase;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
	display: inline-block;
	font-size: 10px;
	line-height: 10px;
}

#moreFileInfo a {
	font-weight: bold;
	color: var(--color-brand);
}
/* /devBar */






/* main navbar */
header nav .profile-image {
	width: 20px;
	height: 20px;
}

.navbar-brand {
	margin-right: 0px;
}
/* /main navbar */




footer {
	position: fixed;
	bottom: 0;
	left: var(--sidebar-w);
	right: 0;
	z-index: 5;
	background: var(--surface);
	border-top: 1px solid var(--line);
	min-height: 36px;
	box-sizing: border-box;
	padding: 6px 24px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: 0.18em;
	word-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--ink-faint);
	box-shadow: none;
	transition: left 0.2s ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
footer strong { font-weight: 600; color: var(--ink-soft); }
footer { gap: 1.4em; }
footer .w { display: inline-flex; }
/* Anonymous pages: no sidebar — footer spans full viewport. */
body > footer { left: 0; }
/* ≤1100px: sidebar is drawer-mode — span footer full-width (else it stays offset by --sidebar-w). */
@media (max-width: 1100px) {
	footer { left: 0; }
}

/* DataTables bottom row — compact info + pagination on one line. */
.dataTables_wrapper .row + .row:last-child {
	align-items: center;
	margin-top: 4px;
}
.dataTables_wrapper .dataTables_info {
	font-size: 11px;
	color: var(--ink-mute);
	padding: 4px 0;
}
.dataTables_wrapper .dataTables_paginate {
	padding: 0;
}
.dataTables_wrapper .dataTables_paginate .pagination {
	margin: 0;
	justify-content: flex-end;
}
.dataTables_wrapper .dataTables_paginate .page-link {
	padding: 2px 8px;
	font-size: 12px;
	line-height: 1.4;
	min-width: 26px;
	text-align: center;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
	font-weight: 600;
}

.footerInfo .infoTitle {
	xmargin-left: 20px;
}

.deleteButtonWrapper {
	text-align: right;
}

.voidButtonWrapper {
	text-align: right;
}

.footerInfo {
	text-align: center;
	color: var(--text-muted);
}
/* /footer */







/* sidebar */
main.wrapper {
	display: flex;
	width: 100%;
	align-items: stretch;
}

#idSearch {
	cursor: pointer;
}

/* ============================================================
   In-page module sub-nav (#sidebar) — shared by People + every
   /reports/* page (people/sidebar.php, reports/sidebar.php).
   ============================================================ */
#sidebar {
	flex: 0 0 var(--sidebar-width);
	min-width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	align-self: flex-start;          /* don't stretch to the results' height */
	position: sticky;
	top: 12px;
	margin: 4px 0 0;
	padding: 0 16px 0 0;
	/* transparent overrides the --surface-sb bg leaking in from the shared `.sidebar` class */
	background: transparent;
	border-right: 1px solid var(--line);
	min-height: 0;                   /* override the legacy 100vh / .sidebar leak */
	height: auto;                    /* .sidebar base sets height:100vh — size to content instead */
	/* defuse the app-shell `.sidebar` off-canvas drawer rule (≤1100px) that this nav inherits via class="sidebar" */
	transform: none;
	box-shadow: none;
	z-index: auto;
	left: auto;
	bottom: auto;
}
/* Neutralize the BS .container/.row/.col gutters fighting the fixed-width rail. */
#sidebar > .container,
#sidebar .row,
#sidebar [class^="col"] {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
/* Jump-to-ID quick search (People only). */
#sidebar #idSearchForm {
	margin-bottom: 16px;
}
/* .btn height doesn't grow with --fs-scale like the input — stretch it to match. */
#sidebar #idSearchForm .input-group > .btn {
	height: auto;
	align-self: stretch;
}
/* Module nav list. */
#sidebar .nav {
	gap: 2px;
}
#sidebar .nav-link {
	margin: 0;
	padding: 8px 12px;
	border-radius: var(--r-md);
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	transition: background-color 0.12s ease, color 0.12s ease;
}
#sidebar .nav-link:hover {
	background-color: var(--surface-2);
	color: var(--ink);
}
#sidebar .nav-link.active,
#sidebar a.active {
	background-color: var(--accent-bg);
	color: var(--accent);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--accent);
}
/* /sidebar */









/* here comes the general */
body {
	padding-top: var(--masthead-height); /* height of masthead */
	min-height: 100vh;
	background: var(--bg);
	color: var(--ink);
}

/* User text-size pref: html font-size stays 16px so BS rem padding/height don't scale — only --fs-scale (text) does. */
html { font-size: 16px; --fs-scale: 1; }
html[data-text-size="sm"] { --fs-scale: 0.85; }
html[data-text-size="md"] { --fs-scale: 1; }
html[data-text-size="lg"] { --fs-scale: 1.2; }
html[data-text-size="xl"] { --fs-scale: 1.4; }

/* Main content text + headings */
.shell > .main { font-size: calc(14px * var(--fs-scale, 1)); }
.shell > .main h1, .shell > .main .page-title { font-size: calc(28px * var(--fs-scale, 1)); }
.shell > .main h2 { font-size: calc(22px * var(--fs-scale, 1)); }
.shell > .main h3 { font-size: calc(18px * var(--fs-scale, 1)); }
.shell > .main h4 { font-size: calc(16px * var(--fs-scale, 1)); }
.shell > .main h5 { font-size: calc(15px * var(--fs-scale, 1)); }
.shell > .main h6 { font-size: calc(14px * var(--fs-scale, 1)); }
.shell > .main p,
.shell > .main label,
.shell > .main .form-label,
.shell > .main .page-sub,
.shell > .main td,
.shell > .main th,
.shell > .main .form-control,
.shell > .main .form-select,
.shell > .main textarea,
.shell > .main input,
.shell > .main select,
.shell > .main .ts-control,
.shell > .main .ts-dropdown,
.shell > .main .ts-dropdown .option,
.shell > .main .btn,
.shell > .main .dataTables_info,
.shell > .main .page-link {
	font-size: calc(14px * var(--fs-scale, 1));
}
.shell > .main .btn-sm,
.shell > .main small,
.shell > .main .evchip-name,
.shell > .main .evchip-loc,
.shell > .main .cal-daynum,
.shell > .main .evchip-entries {
	font-size: calc(12px * var(--fs-scale, 1));
}

/* Anonymous pages (no .main shell) reserve bottom space so content clears the fixed footer. */
body.page-account-sign-in,
body.page-account-password-reset {
	padding-bottom: 52px;
}

main {
	padding-top: 15px;
	padding-bottom: 2rem;
}

h1 {
	xfont-weight: lighter;
	margin-top: 0px;
	font-size: 32px;
}

h1 small {
	xfont-weight: lighter;
	font-size: 45%;
	color: var(--text-muted-soft);
}


h2 {
	xfont-weight: lighter;
	margin-top: 0px;
}

p.caption {
	font-size: var(--font-size-info);
	color: var(--text-caption);
}

label + p.caption {
	margin-top: -0.5rem;
}

label + .caption {
	margin-top: -0.5rem;
}

.alert { /* the notification */
	text-align: center;
}

form label {
	font-weight: bold;
	xfont-weight: lighter;
}

form input[type="checkbox"] + label {
	font-weight: normal;
}

.caption {
	font-size: var(--font-size-caption);
	margin-bottom: 0px;
	color: var(--text-muted-strong);
}

label.required .fa-asterisk {
	color: var(--color-required);
	font-size: var(--font-size-xs-btn);
	vertical-align: text-top;
}

.searchButtonWrapper {
	text-align: right;
}

.bg-light .btn-light {
	border-color: var(--border-default);
	background-color: var(--surface-page);
}
/* /here comes the general */





/* editor */
.infoBlock {
	white-space: nowrap;
}

.infoTitle {
	color: var(--text-muted);
	display: inline;
	text-transform: uppercase;
	font-size: var(--font-size-info);
	font-weight: bold;
}

.infoTitle:after {
	content: ":";
}

.info {
	display: inline;
}

h1 small {
	color: var(--text-muted-soft);
}

.editorHeaderButtons {
	text-align: right;
	white-space: nowrap;
}
/* Tablet (768–991): wrap long action-button labels so they don't overflow their column. */
@media (max-width: 991.98px) {
	.editorHeaderButtons,
	.utilButtons {
		white-space: normal;
	}
	.editorHeaderButtons .btn,
	.utilButtons .btn {
		white-space: normal;
	}
}

#editorHeader {
	border-bottom: 1px solid var(--border-faint);
	margin-bottom: 20px;
}

/*
#editorHeader.affix {
	background-color: rgba(237, 237, 237, 0.9);
	z-index: 1029;
	width: 100%;
	left: 0px;
	margin-left: 0px;
	padding-top: 10px;
}
*/

#editorHeader.floating {
	padding-top: 0.5rem;
	xpadding-bottom: 0.5rem;
	-webkit-box-shadow: var(--shadow-elevated);
	-moz-box-shadow: var(--shadow-elevated);
	box-shadow: var(--shadow-elevated);
}

#editorHeader.floating + .row {
	xmargin-top: 65px;
}

#editorHeader.floating {
	background-color: var(--surface-header-float);
	position: fixed;
    top: -100px;
    width: 100%;
    z-index: 1029;
    transition: top 0.5s ease 0s;
    -webkit-transition: top 0.5s ease 0s;
    -moz-transition: top 0.5s ease 0s;
    -o-transition: top 0.5s ease 0s;
}

#editorHeader {
	border-bottom: 1px solid var(--border-faint);
	margin-bottom: 20px;
}

.bootstrap-datetimepicker-widget {
	box-shadow: var(--shadow-datepicker);
}
/* /editor */










/* buttons */
.btn-outline-primary {
	background-color: var(--surface-page);
}

.btn-group-xs > .btn, .btn-xs { /* -xs doesn't exist in bs4 */
	padding: 0.3rem 0.3rem;
	font-size: var(--font-size-xs-btn);
	line-height: 0.5;
	border-radius: var(--radius-sm);
}
/* /buttons */








/* form field overrides */
.custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid {
/* .custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid { */
	border-color: var(--border-default);
}

.custom-select.is-valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .was-validated .form-control:valid:focus {
/* .custom-select.is-invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .was-validated .form-control:invalid:focus { */
	border-color: var(--border-default);
	box-shadow: 0 0 0 0;
}

.form-control.is-valid, .was-validated .form-control:valid {
	background-image: none; /* remove checkbox from valid fields */
}
/* …except native .no-ts selects: they use background-image for the chevron, which the is-valid rule above would wipe. */
select.no-ts.form-control.is-valid,
select.form-control.no-ts.is-valid,
.was-validated select.no-ts.form-control:valid,
.was-validated select.form-control.no-ts:valid {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
	background-position: right 10px center !important;
	background-size: 13px 13px !important;
}
[data-theme="dark"] select.no-ts.form-control.is-valid,
[data-theme="dark"] select.form-control.no-ts.is-valid {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
/* /form field overrides */







/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4 */
.toggle-off {
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.toggle.off {
	border-color: rgba(0, 0, 0, 0.25);
}

.toggle-handle {
	background-color: white;
	border: thin rgba(0, 0, 0, 0.25) solid;
}






/* datatables */
.dt-bootstrap4 .buttonBar button {
	margin-right: 4px;
	border-color: var(--border-soft);
	background-color: var(--surface-page);
	color: var(--text-muted-bs);
	border-radius: var(--radius-default) !important;
}

table.dataTable thead th {
	white-space: nowrap;
}

table.dataTable tr.unpublished {
	color: var(--text-disabled-row);
}

table.dataTable tr.futureRow {
	font-style: italic;
}

table.dataTable .gripper {
	cursor: move;
}

table.dataTable tr.even:hover,
table.dataTable tr.odd:hover {
	background-color: var(--surface-row-hover);
	cursor: pointer;
}

table.dataTable thead .sorting:after { /* only show the sorter icons when the row is actually sorting */
	content: none;
}

.tableUtils {
	margin-top: 10px;
	font-size: 85%;
}

.nowrapDate {
	white-space: nowrap;
}

.multiselect-container>li>a>label {
	padding-left: 15px;
}

th.dt-center, td.dt-center {
	text-align: center;
}

table.dataTable td.control {
	width: 20px;
	min-width: 20px;
}

table.dataTable.dtr-column>tbody>tr>td.control:before,
table.dataTable.dtr-column>tbody>tr>th.control:before {
	box-shadow: 0px 0px 0px black;
	border: 0px;
	width: 20px;
	background-color: transparent;
	font-family: inherit;
	font-size: 2em;
	color: inherit;
	content: "▸";
}

table.dataTable.dtr-column>tbody>tr.parent td.control:before,
table.dataTable.dtr-column>tbody>tr.parent th.control:before {
	content: "▾";
	background-color: transparent;
}

/* responsive subtable should be 100% wide */
table.dataTable>tbody>tr.child ul.dtr-details {
	display: block;
}

.dataTables_wrapper .totalRecords {
	font-size: var(--font-size-info);
}

/* small screens */
@media (max-width: 767px) {
	.tableUtils {
		text-align: center;
		margin-bottom: 1em;
	}
}
/* /datatables */






/* special links */
.downloadLink {
	text-transform: uppercase;
}
/* /special links */




/* dropzone */
.dropzone {
	border: 0px;
	background-color: transparent;
	padding: 0px;
	min-height: 50px;
}

.dropzone .dz-preview,
.dropzone .dz-preview .dz-image {
	width: 100%;
	height: auto;
	margin: 0px;
	border-radius: 0px;
}

.purchaseOrder .dz-preview .dz-image {
	max-height: 500px;
	overflow-y: auto;

}

.dropzone .dz-preview .dz-image img {
	width: 100%;
}

.dropzone .dz-message {
	margin: 0px;
	padding-top: 2em;
	padding-bottom: 2em;
	border: 1px solid silver;
}

.dropzone .dz-details {
	display: none;
}

.dropzone .dz-preview .dz-error-message {
	color: white;
	left: auto;
	width: auto;
	top: 120px;
}

.dropzone .dz-preview .dz-remove {
	font-size: var(--font-size-info);
}

.dropzone .dz-preview:hover .dz-image img {
	-webkit-transform: inherit;
	-moz-transform: inherit;
	-ms-transform: inherit;
	-o-transform: inherit;
	transform: inherit;
	-webkit-filter: inherit;
	filter: inherit;
}

.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
	top: 50px;
}

.dropzone .dz-preview.dz-image-preview {
	background-color: transparent;
}
.select-form-control {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-form);
	background-color: var(--surface-page);
	background-clip: padding-box;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-default);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/* /dropzone */




/* === shared utilities (promoted from pages in Phase E) ===
   Class-named utilities that appeared identically in 3+ pages get hoisted
   here so they apply globally and the page namespaces stay smaller.

   NOT promoted, even though they appear in 3+ pages:
   - `.text-wrap` (classification, content-management, content-management-bingo)
     collides with Bootstrap 4's own `.text-wrap` utility class.
   - `header, footer { display: none !important; }` (sign-in, password-reset,
     password-reset-request, both announcer-scripts) — promoting unprefixed
     would hide the global chrome on every page in the app.
   - `.dropzone .dz-details { display: block }` + `.dropzone .dz-preview /
     .dz-image { height: 120px }` (events-images-editor, events-attachments-
     editor, events-schedule-editor, common-broadcast-compose-email) — these
     override the base `.dropzone` rules above. Promoting globally would
     break every other dropzone in the app. */
.selectedRow {
	font-weight: bold;
}
.deleterIconCell {
	cursor: pointer;
}
.cloneSource {
	display: none;
}
.noRecords {
	text-align: center;
	padding: 10px;
	color: silver;
	border-top: 1px solid silver;
}
/* === /shared utilities === */


/* === pages === */
/* Per-page styles extracted from inline <style> blocks. Each block is
   namespaced by the body class set via $wrapper->bodyClass on its page. */


/* C1 — low-risk standalone pages */

/* page-account-credentials — from account/credentials/index.php */
body.page-account-credentials .passwordMeter .progress {
	height: 4px;
	margin-top: -10px;
}

/* page-account-password-reset — from account/password-reset/index.php */
body.page-account-password-reset header,
body.page-account-password-reset footer {
    display: none !important;
}
body.page-account-password-reset .has-error .form-control {
    border-color: var(--state-danger-text);
}
body.page-account-password-reset .has-error .form-control:focus {
    box-shadow: 0 0 0 0.2rem #a9444266;
}
body.page-account-password-reset .has-success .form-control {
    border-color: var(--state-success-text);
}
body.page-account-password-reset .has-success .form-control:focus {
    box-shadow: 0 0 0 0.2rem #3c763d66;
}
body.page-account-password-reset .text-red {
    color: var(--state-danger-text);
}
body.page-account-password-reset .has-error span {
    font-size: .85rem
}
body.page-account-password-reset .pw-rules {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    font-size: .85rem;
}
body.page-account-password-reset .pw-rules li {
    padding: 2px 0;
    color: #888;
    transition: color .15s;
}
body.page-account-password-reset .pw-rules li .fa {
    width: 16px;
    text-align: center;
    margin-right: 4px;
}
body.page-account-password-reset .pw-rule-pass {
    color: var(--state-success-text) !important;
}
body.page-account-password-reset .pw-rule-pass .fa { color: var(--state-success-text); }
body.page-account-password-reset .pw-rule-fail {
    color: var(--state-danger-text) !important;
}
body.page-account-password-reset .pw-rule-fail .fa { color: var(--state-danger-text); }

/* page-account-password-reset-request — from account/password-reset/request/index.php */
body.page-account-password-reset-request header,
body.page-account-password-reset-request footer {
	display: none !important;
}

/* page-account-sign-in — from account/sign-in/index.php */
body.page-account-sign-in header,
body.page-account-sign-in footer {
	display: none !important;
}
body.page-account-sign-in body {
	xbackground-color: #f9f9f9;
}

/* page-admin-audit-logs — from admin/audit-logs/index.php */
body.page-admin-audit-logs .auditTile {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 15px;
    background: #fff;
    transition: box-shadow 0.15s;
}
body.page-admin-audit-logs .auditTile:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
body.page-admin-audit-logs .auditTile.disabled { background: var(--surface-alt-row); opacity: 0.6; }
body.page-admin-audit-logs .auditTile .tileCount { font-size: 2.5em; font-weight: 300; color: #343a40; }
body.page-admin-audit-logs .auditTile .tileLabel { color: var(--text-muted-bs); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; }
body.page-admin-audit-logs .auditTile .tileDomain { font-size: 1.4em; margin-bottom: 10px; text-transform: capitalize; }
body.page-admin-audit-logs .auditTile a { color: inherit; text-decoration: none; display: block; }

/* page-admin-audit-logs-view — from admin/audit-logs/view.php */
body.page-admin-audit-logs-view .auditTabs .nav-link { text-transform: capitalize; }
body.page-admin-audit-logs-view .auditTabs .nav-link.disabled { color: #999 !important; cursor: not-allowed; }
body.page-admin-audit-logs-view td.severity-warning  { background-color: var(--state-warning-bg); }
body.page-admin-audit-logs-view td.severity-critical { background-color: var(--state-danger-bg); }
body.page-admin-audit-logs-view td.severity-notice   { background-color: var(--state-notice-bg); }
body.page-admin-audit-logs-view td.correlation-cell  { font-family: monospace; font-size: 0.85em; }
body.page-admin-audit-logs-view td.correlation-cell a { text-decoration: none; }

/* SC-1961 — cross-surface badge: marks rows that show in both Events and Admin tabs so they don't read as duplicates. */
body.page-admin-audit-logs-view .auditSourceBadge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 8px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--state-warning-bg);
    color: var(--state-warning-text);
    vertical-align: middle;
}
body.page-admin-audit-logs-view tr.auditCrossSurfaceRow { background-color: var(--state-info-bg) !important; }

/* SC-1961 — DataTables child-row (inline detail): col 0 toggles a child row fetching detail-fragment.php. */
body.page-admin-audit-logs-view td.auditExpandControl { cursor: pointer; text-align: center; width: 30px; user-select: none; }
body.page-admin-audit-logs-view td.auditExpandControl:before { content: "+"; font-weight: bold; color: #0d6efd; }
body.page-admin-audit-logs-view tr.shown td.auditExpandControl:before { content: "\2212"; }
body.page-admin-audit-logs-view tr.auditChildRow > td { background: var(--surface-alt-row); padding: 12px 18px; }
body.page-admin-audit-logs-view tr.auditChildRow .auditDetail--fragment dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 20px; margin-bottom: 8px; }
body.page-admin-audit-logs-view tr.auditChildRow .auditDetail--fragment dt { font-weight: 600; color: #555; }
body.page-admin-audit-logs-view tr.auditChildRow .auditDetail--fragment dd { margin: 0; word-break: break-word; }
body.page-admin-audit-logs-view tr.auditChildRow .auditDetail--fragment .sectionHeader { margin-top: 14px; margin-bottom: 6px; font-weight: 600; font-size: 1em; border-bottom: 1px solid #dee2e6; padding-bottom: 3px; }
body.page-admin-audit-logs-view tr.auditChildRow .diffTable td,
body.page-admin-audit-logs-view tr.auditChildRow .diffTable th { vertical-align: top; padding: 4px 8px; }
body.page-admin-audit-logs-view tr.auditChildRow .diffTable .fieldName { font-family: monospace; font-weight: 600; }
body.page-admin-audit-logs-view tr.auditChildRow .diffTable .oldValue { color: var(--state-danger-strong); background: var(--state-danger-bg); }
body.page-admin-audit-logs-view tr.auditChildRow .diffTable .newValue { color: #155724; background: var(--state-success-bg); }
body.page-admin-audit-logs-view tr.auditChildRow pre.jsonBlock { background: #ffffff; border: 1px solid #e1e4e8; border-radius: 4px; padding: 8px; font-size: 0.8em; max-height: 300px; overflow: auto; }
body.page-admin-audit-logs-view tr.auditChildRow .auditLoading { color: var(--text-muted-bs); font-style: italic; }

/* page-admin-merge — from admin/merge/index.php */
body.page-admin-merge .card-header {
	cursor: pointer;
}

/* page-reports-dashboard — wide tables scroll inside each card instead of overflowing the page. */
body.page-reports-dashboard .card-body {
	overflow-x: auto;
}

/* page-classification — from classification/index.php */
body.page-classification .text-wrap{
    white-space:normal;
     word-wrap:break-word;
}
body.page-classification .width-200 {
    width:205px;
}
body.page-classification .custom-width {
    width: 7%;
}

/* ============================================================
   page-classification-editor — the #classifications repeater grid.
   ============================================================ */
/* Header → compact uppercase caption, clean wrap, bottom-aligned. */
body.page-classification-editor #classifications th {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	color: var(--ink-mute);
	vertical-align: bottom;
	white-space: normal;
	padding: 4px 8px 8px;
	border-bottom: 1.5px solid var(--line);
}
body.page-classification-editor #classifications th .text-muted {
	text-transform: none;
	font-weight: 400;
}
/* Body cells → middle-aligned, tight padding, hairline row separators. */
body.page-classification-editor #classifications tr.unitProductionPerson > td {
	vertical-align: middle;
	padding: 5px 8px;
	border-bottom: 1px solid var(--line);
}
/* Subtle zebra striping makes a wide row easy to track across columns. */
body.page-classification-editor #classifications tr.unitProductionPerson:nth-of-type(even) > td {
	background: var(--surface-2);
}
/* Kill the inner .mb-3 margins that bloated each row's height. */
body.page-classification-editor #classifications td .mb-3 {
	margin-bottom: 0 !important;
}
/* Consistent control heights so every row aligns on one baseline. */
body.page-classification-editor #classifications td .form-control,
body.page-classification-editor #classifications td select,
body.page-classification-editor #classifications td .input-group,
body.page-classification-editor #classifications td .input-group .form-control {
	height: 34px;
	min-height: 34px;
}
body.page-classification-editor #classifications td textarea.form-control {
	height: 34px;
	min-height: 34px;
	resize: vertical;
}
/* Lone checkbox columns → center the box under its header (and center
   those headers) so the Display Fees/Duration/Description toggles read
   as a clear column rather than a stray box on the left edge. */
body.page-classification-editor #classifications td:has(> .form-check) {
	text-align: center;
}
body.page-classification-editor #classifications td .form-check {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 0;
	margin: 0;
	padding: 0;
}
body.page-classification-editor #classifications td .form-check .form-check-input {
	margin: 0;
	float: none;
	width: 1.05rem;
	height: 1.05rem;
}
body.page-classification-editor #classifications th:nth-child(7),
body.page-classification-editor #classifications th:nth-child(9),
body.page-classification-editor #classifications th:nth-child(11),
body.page-classification-editor #classifications th:nth-child(12) {
	text-align: center;
}
/* Published toggle + delete button: vertically centered, snug. */
body.page-classification-editor #classifications td:has(> .input-group > .switch),
body.page-classification-editor #classifications td:has(> .goAwayButton),
body.page-classification-editor #classifications td:last-child {
	text-align: center;
}
body.page-classification-editor #classifications td .input-group:has(> .switch) {
	display: inline-flex;
	justify-content: center;
	width: 100%;
}

/* --- Polish pass 2 (design-panel synthesis) --------------------------------
   Fixed column budget, numeric alignment, calmer Published toggle + delete,
   a contained card, row-hover tracking, grouped toggle columns, and clearer
   field affordances. All CSS-only / constraint-safe. ------------------------ */

/* Fixed layout + per-column width budget: give Name + Description the room,
   shrink the numeric/boolean columns. The 12 <th> sum to 93.5%; the 13th
   (headerless delete) column takes the ~6.5% remainder. */
body.page-classification-editor #classifications {
	table-layout: fixed;
	width: 100%;
}
body.page-classification-editor #classifications th:nth-child(1)  { width: 11%; }   /* Name */
body.page-classification-editor #classifications th:nth-child(2)  { width: 6.5%; }  /* Division */
body.page-classification-editor #classifications th:nth-child(3)  { width: 6%; }    /* Min Perf. */
body.page-classification-editor #classifications th:nth-child(4)  { width: 6%; }    /* Max Perf. */
body.page-classification-editor #classifications th:nth-child(5)  { width: 9.5%; }  /* Member Fee */
body.page-classification-editor #classifications th:nth-child(6)  { width: 9.5%; }  /* Non-Member Fee */
body.page-classification-editor #classifications th:nth-child(7)  { width: 5%; }    /* Show Fees */
body.page-classification-editor #classifications th:nth-child(8)  { width: 9.5%; }  /* Perf Duration */
body.page-classification-editor #classifications th:nth-child(9)  { width: 5%; }    /* Show Duration */
body.page-classification-editor #classifications th:nth-child(10) { width: 11%; }   /* Description */
body.page-classification-editor #classifications th:nth-child(11) { width: 5%; }    /* Show Desc. */
body.page-classification-editor #classifications th:nth-child(12) { width: 11%; }   /* Published */
/* Primary text fields fill their new column budget. */
body.page-classification-editor #classifications td:nth-child(1) .form-control,
body.page-classification-editor #classifications td:nth-child(10) .form-control {
	width: 100%;
}

/* Numeric Performer columns: values right-aligned, narrow headers centered. */
body.page-classification-editor #classifications td:nth-child(3) .form-control,
body.page-classification-editor #classifications td:nth-child(4) .form-control {
	text-align: right;
}
body.page-classification-editor #classifications th:nth-child(3),
body.page-classification-editor #classifications th:nth-child(4) {
	text-align: center;
}

/* Published toggle: cap width and soften the ON fill to a tinted accent chip. */
body.page-classification-editor #classifications td .toggle.btn {
	width: 120px !important;
	max-width: 100%;
	min-width: 0;
}
body.page-classification-editor #classifications td .toggle.btn.btn-primary,
body.page-classification-editor #classifications td .toggle.btn:not(.off) {
	background-color: var(--accent-bg) !important;
	border-color: var(--accent) !important;
}
body.page-classification-editor #classifications td .toggle.btn:not(.off) .toggle-on {
	color: var(--accent) !important;
}

/* Delete control: muted icon, destructive-red only on hover/focus. */
body.page-classification-editor #classifications td:last-child .goAwayButton {
	color: var(--ink-mute) !important;
	border-color: transparent !important;
	background: transparent !important;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	line-height: 1;
}
body.page-classification-editor #classifications td:last-child .goAwayButton:hover,
body.page-classification-editor #classifications td:last-child .goAwayButton:focus-visible {
	color: #fff !important;
	background: var(--red) !important;
	border-color: var(--red) !important;
}

/* Contain the grid in a card (matches the search card above). */
body.page-classification-editor #classifications {
	margin-bottom: 0;
}
body.page-classification-editor .mb-3:has(> #classifications) {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-elevated);
	padding: 6px 14px 12px;
}

/* Whole-row hover (overrides the zebra stripe on hover). */
body.page-classification-editor #classifications tr.unitProductionPerson:hover > td {
	background: var(--surface-hov);
}

/* Left hairline attaches each Show toggle to the field group it controls. */
body.page-classification-editor #classifications td:nth-child(7),
body.page-classification-editor #classifications td:nth-child(9),
body.page-classification-editor #classifications td:nth-child(11) {
	border-left: 1px solid var(--line);
	padding-left: 4px;
	padding-right: 4px;
}
body.page-classification-editor #classifications th:nth-child(7),
body.page-classification-editor #classifications th:nth-child(9),
body.page-classification-editor #classifications th:nth-child(11) {
	padding-left: 4px;
	padding-right: 4px;
}

/* Calmer currency adornment + clear focus ring for the dense row. */
body.page-classification-editor #classifications td .input-group .input-group-text {
	background: var(--surface-2);
	color: var(--ink-mute);
	border-color: var(--line);
	/* Compact $ adornment so the fee input keeps room for 3-4 digits. */
	padding: 0 6px;
	min-width: 0;
}
/* Fee input fills the group with tight padding (was clipping 3-digit values). */
body.page-classification-editor #classifications td .input-group .form-control {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 6px;
	padding-right: 4px;
}
body.page-classification-editor #classifications td .form-control:focus,
body.page-classification-editor #classifications td select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-bg);
}

/* Anchor the add button to the grid; collapse the Repeater's empty header label. */
body.page-classification-editor .newProductionPersonButton,
body.page-classification-editor #newClassificationButton {
	margin-bottom: 8px;
	font-weight: 600;
}
body.page-classification-editor .row > .col-6 > label:empty {
	display: none;
}

/* Performance Duration: nowrap flex row keeps the two hh:mm selects side-by-side. */
body.page-classification-editor #classifications td:nth-child(8) .mb-3 {
	display: flex;
	gap: 4px;
	flex-wrap: nowrap;
	align-items: center;
}
body.page-classification-editor #classifications td:nth-child(8) select {
	width: 50%;
	min-width: 0;
	padding-left: 4px;
	padding-right: 16px;
}

/* page-content-management-bingo — from content-management/bingo/index.php */
body.page-content-management-bingo .text-wrap{
    white-space:normal;
     word-wrap:break-word;
}
body.page-content-management-bingo .width-200 {
    width:305px;
}

/* page-content-management-crud-list — from content-management/crud/list/index.php
   .actionButtons stays a table-cell (no inline-flex) so the striped bg fills its column. */

/* page-content-management — from content-management/index.php */
body.page-content-management .text-wrap{
    white-space:normal;
     word-wrap:break-word;
}
body.page-content-management .width-200 {
    width:305px;
}

/* page-index — from womp/index.php: redirects to /events/, so no rules apply here. */

/* page-news-editor — from news/editor.php */
body.page-news-editor .note-editing-area img {
    max-width: 100%;
}
body.page-news-editor .extraUtilButton {
    margin-right: 50px;
}

/* C2 — editor pages */

/* page-people-editor — from people/editor.php */
body.page-people-editor h2.tableHeading {
    font-size: 1.1em;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 10px;
    background-color: #c4c4c4;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-transform: uppercase;
    color: #f9f9f9;
}
body.page-people-editor h2.tableHeading .btn-group {
    text-transform: none;
}
body.page-people-editor .dataTables_scroll {
    margin-bottom: 6px;
}
body.page-people-editor .tableUtils {
    display: none;
}
body.page-people-editor table.dataTable {
    margin-top: 0px !important;
}
body.page-people-editor .invoiceSubtable {
    width: 100%;
}
body.page-people-editor .invoiceSubtable th {
    text-transform: uppercase;
    font-size: 0.8em;
    color: #a5a5a5;
}
body.page-people-editor .invoiceSubtable .invoiceID {
    width: 15%;
}
body.page-people-editor .invoiceSubtable .amount,
body.page-people-editor .invoiceSubtable .balance {
    width: 20%;
    text-align: right;
}
body.page-people-editor .deceased {
    top: -3px;
    position: relative;
}
body.page-people-editor .footerUtils .form-group {
    margin-bottom: 0px;
}

/* page-units-editor — from units/editor.php */
body.page-units-editor td.date {
    white-space: nowrap;
}

/* page-units-productions-editor — from units/productions/editor.php;
   `.cloneSource` and `.noRecords` promoted to shared utilities */
body.page-units-productions-editor td.gripper {
    width: 10px;
    color: #aaaaaa;
    vertical-align: middle;
    cursor: move;
    padding-left: 0px;
    padding-right: 0px;
}
body.page-units-productions-editor .unitProductionPeople th {
    text-transform: uppercase;
    color: #aaaaaa;
    font-size: 0.8em;
}

/* page-units-purchase-order-editor — from units/purchase-order/editor.php
   The original inline block applied a PDF override conditionally via PHP.
   We keep the override in CSS and gate it with the `.has-pdf` body class
   that the page sets when the uploaded file is a PDF. */
body.page-units-purchase-order-editor .dropzone .dz-remove {
    color: #fff;
    background-color: var(--color-required);
    border-color: var(--color-required);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    cursor: pointer;
    display: inline-block !important;
}
body.page-units-purchase-order-editor .dz-image {
    padding: .05rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    max-width: 100%;
    width: auto;
    margin-bottom: 5px !important;
}
body.page-units-purchase-order-editor.has-pdf .dz-image {
    padding: 0;
    background-color: #fff;
    border: 0 !important;
    max-width: 100%;
    width: auto;
    margin: 0 !important;
}
body.page-units-purchase-order-editor .dz-file-preview,
body.page-units-purchase-order-editor .dz-image-preview {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

/* page-units-invoices-print — from units/invoices/print.php (print template, no Wrapper class; body class set directly). */
body.page-units-invoices-print {
    background-color: white;
    font-size: 0.8em;
    color: black;
}
body.page-units-invoices-print .header {
    padding-top: 20px;
    padding-bottom: 1em;
    padding-left: 50px;
    padding-right: 50px;
}
body.page-units-invoices-print .body {
    padding-left: 50px;
    padding-right: 50px;
}
body.page-units-invoices-print .logo {
    width: 130px;
    float: right;
}
body.page-units-invoices-print .logo img {
    width: 130px;
}
body.page-units-invoices-print .date {
    margin-bottom: 2em;
    font-size: 0.8em;
}
body.page-units-invoices-print .memberStatementHeader {
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    padding: 3px;
    margin-bottom: 1em;
    font-size: 0.9em;
    font-weight: bold;
}
body.page-units-invoices-print .payOnline {
    font-size: 1.2em;
    margin-bottom: 1em;
}
body.page-units-invoices-print .footer {
    text-align: center;
    font-size: 0.8em;
}
body.page-units-invoices-print .pageBreak {
    page-break-after: always;
}
body.page-units-invoices-print .statement table tr td {
    border-bottom: 1px dashed silver;
}
body.page-units-invoices-print .statement table tr td.noGoods {
    border-bottom: 0px;
    font-size: 0.8em;
}
body.page-units-invoices-print .name {
    font-weight: bold;
    font-size: 1.6em;
}
body.page-units-invoices-print .address {
    padding-top: 80px;
    padding-bottom: 50px;
}
body.page-units-invoices-print .none {
    padding: 100px;
    text-align: center;
}
body.page-units-invoices-print .clear {
    clear: both;
}
body.page-units-invoices-print th {
    white-space: nowrap;
}
body.page-units-invoices-print .invoiceDate {
    white-space: nowrap;
}
body.page-units-invoices-print .amount,
body.page-units-invoices-print .balance,
body.page-units-invoices-print .amountToPay {
    text-align: right;
}
body.page-units-invoices-print .amountToPay {
    display: none;
}

/* page-classification-editor — from classification/editor.php;
   `.cloneSource` and `.noRecords` promoted to shared utilities */
body.page-classification-editor .select2-selection__rendered {
    max-height: 150px;
    overflow-x: auto;
}
body.page-classification-editor .select2-container .select2-selection--multiple .select2-selection__rendered {
    overflow: auto;
}

/* page-marketing-modals-editor — from marketing-modals/editor.php */
body.page-marketing-modals-editor #actionButtonColorPicker {
    position: relative;
    width: 64px;
    min-width: 64px;
    height: 38px;
}
body.page-marketing-modals-editor #actionButtonColorPicker .colorpicker-value {
    position: absolute;
    inset: 0;
    opacity: 0.01;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
}
body.page-marketing-modals-editor #actionButtonColorPreview {
    width: 64px;
    height: 38px;
    padding: 2px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-marketing-modals-editor #actionButtonColorPreview i {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: .2rem;
}

/* page-events — v3 calendar design. CSS-grid based (not table). */

/* Calendar toolbar — segmented month nav + filters + view toggle */
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 16px;
    flex-wrap: wrap;
}
.cal-toolbar .spacer { flex: 1; }

.month-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    height: 34px;
}
.month-nav > a,
.month-nav > button {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.month-nav > a:hover,
.month-nav > button:hover { background: var(--surface-2); color: var(--ink); }
.month-nav .date {
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    height: 28px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.month-nav .today-btn {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    padding: 0 10px;
    height: 28px;
    width: auto;
    color: var(--ink-soft);
    text-decoration: none;
}

/* Calendar shell */
body.page-events .calendar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Day-of-week header strip */
body.page-events .cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
body.page-events .cal-dow > div {
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
    border-right: 1px solid var(--line);
}
body.page-events .cal-dow > div:last-child { border-right: none; }
body.page-events .cal-dow > div.weekend { color: var(--ink-soft); }

/* Cell grid */
body.page-events .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
body.page-events .cal-cell {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-height: 110px;
    padding: 7px 9px 9px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: background 0.1s;
}
body.page-events .cal-cell:nth-child(7n) { border-right: none; }
body.page-events .cal-grid > .cal-cell:nth-last-child(-n+7) { border-bottom: none; }
/* Cell-level hover no longer changes background — each .evchip handles its
   own hover highlight, which keeps focus on the actual interactive row.
   The + button still surfaces on cell hover (rule further down). */
body.page-events .cal-cell.other-month { background: var(--surface-2); }
body.page-events .cal-cell.other-month .cal-daynum { color: var(--ink-faint); }
body.page-events .cal-cell.today { background: var(--accent-bg); }
body.page-events .cal-cell.today .cal-daynum {
    background: var(--accent);
    color: white;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 700;
}

/* Cell header (daynum + actions) */
body.page-events .cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 5px;
    min-height: 18px;
}
body.page-events .cal-daynum {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    padding: 1px 4px;
}
body.page-events .cal-head-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}
body.page-events .cal-send {
    background: transparent;
    border: none;
    padding: 2px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--accent);
    opacity: 0.7;
    transition: opacity 0.1s, background 0.1s;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.page-events .cal-send:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 10%, transparent); }
body.page-events .cal-add {
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-faint);
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    transition: all 0.1s;
    flex-shrink: 0;
    text-decoration: none;
}
body.page-events .cal-cell:hover .cal-add { opacity: 1; }
body.page-events .cal-add:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* Event chips list */
body.page-events .cal-events {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
body.page-events .evchip {
    padding: 5px 0;
    line-height: 1.25;
    transition: background 0.1s;
    border-radius: 3px;
}
body.page-events .evchip + .evchip { border-top: 1px solid var(--line); }
body.page-events .evchip:hover {
    background: var(--surface-2);
    padding: 5px 6px;
    margin: 0 -4px;
    border-top-color: transparent;
}
body.page-events .evchip:hover + .evchip { border-top-color: transparent; }
/* Event chip name (published → accent; drafts → italic muted + DRAFT badge). */
body.page-events .evchip-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
}
body.page-events .evchip-name a {
    color: inherit;
    text-decoration: none;
}
body.page-events .evchip-name a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Published — accent color */
body.page-events .evchip.active .evchip-name,
body.page-events .evchip.active .evchip-name a { color: var(--accent); }

/* Draft / unpublished — italic muted + "draft" badge */
body.page-events .evchip:not(.active) .evchip-name,
body.page-events .evchip:not(.active) .evchip-name a {
    color: var(--ink-mute);
    font-style: italic;
}
body.page-events .evchip:not(.active) .evchip-name::after {
    content: 'draft';
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    color: var(--ink-faint);
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 6px;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 1px;
    background: var(--surface);
    font-family: var(--font-mono);
}

/* Performance — bolder name as a small modifier on top of the state color */
body.page-events .evchip.performance .evchip-name,
body.page-events .evchip.performance .evchip-name a { font-weight: 700; }
body.page-events .evchip-loc {
    font-size: 10.5px;
    color: var(--ink-mute);
    margin-top: 2px;
}
body.page-events .evchip-entries {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-mute);
    margin-left: 4px;
    font-weight: 400;
}

/* Staff badge button (judges) — sits at bottom of cell */
body.page-events .cal-staff {
    margin-top: 6px;
    align-self: flex-start;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    line-height: 1.3;
}

/* Tom Select dropdown z-index must beat the calendar grid (positioned children) after AJAX reload. */
body.page-events .ts-dropdown { z-index: 1050; }

/* ============================================================
   EVENT EDITOR — all selectors scoped to body.page-events-editor
   ============================================================ */


/* ============================================================
   01 · PAGE HEAD
   ============================================================ */

body.page-events-editor #editorHeader {
    align-items: center;
    margin: -24px -32px 28px;        /* bleed past .main padding so the sticky bar spans full column */
    padding: 14px 32px 16px;
    gap: 24px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    box-shadow: 0 1px 0 0 var(--line);
    display: flex !important;
    flex-wrap: nowrap;
}

body.page-events-editor #editorHeader > .col:first-child {
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 0;
}
body.page-events-editor #editorHeader > .col.editorHeaderButtons {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-right: 0;
    padding-left: 0;
}
body.page-events-editor #editorHeader h1 {
    font-family: var(--font-sans);
    font-size: calc(12px * var(--fs-scale, 1));
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-faint);
    line-height: 1.3;
    margin: 0;
    display: block;
}
/* "Events / Edit" — small breadcrumb */
body.page-events-editor #editorHeader h1 .title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
body.page-events-editor #editorHeader h1 .title a {
    color: var(--ink-mute);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.12s ease;
}
body.page-events-editor #editorHeader h1 .title a:hover { color: var(--ink); }

/* Event name — sized to fit comfortably in the sticky 60px bar */
body.page-events-editor #editorHeader h1 b {
    display: block;
    margin: 3px 0 0 !important;
    font-size: calc(20px * var(--fs-scale, 1)) !important;
    font-weight: 600 !important;
    font-style: normal;
    color: var(--ink) !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-family: var(--font-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ID badge — mono chip nested inline with the breadcrumb */
body.page-events-editor #editorHeader .infoBlock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--fs-scale, 1));
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
    vertical-align: 1px;
    transition: border-color 0.15s ease;
}
body.page-events-editor #editorHeader .infoBlock:hover { border-color: var(--line-strong); }
body.page-events-editor #editorHeader .infoBlock .infoTitle,
body.page-events-editor #editorHeader .infoBlock .info {
    display: inline;
    font-size: inherit;
    color: inherit;
    font-weight: 500;
    text-transform: none;
    margin: 0;
}
body.page-events-editor #editorHeader .infoBlock .infoTitle::after { content: " "; color: var(--ink-faint); }

/* Header buttons column — pinned to far right of the sticky bar */
body.page-events-editor #editorHeader .editorHeaderButtons {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    text-align: right;
    margin-left: auto;
}
/* Soft visual separation between secondary (View/Clone) and primary (Cancel/Save) groups */
body.page-events-editor #editorHeader .editorHeaderButtons .cancelButton {
    margin-left: 10px;
    position: relative;
}
body.page-events-editor #editorHeader .editorHeaderButtons .cancelButton::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--line);
}
/* Compact button sizing inside the sticky bar so it stays short */
body.page-events-editor #editorHeader .editorHeaderButtons .btn {
    height: 32px;
    padding: 0 12px;
    font-size: calc(13px * var(--fs-scale, 1));
}


/* ============================================================
   02 · TABS
   ============================================================ */

body.page-events-editor #nav-tab.nav-tabs,
body.page-events-editor #nav-tab.nav.nav-tabs {
    border: none;
    border-bottom: 1px solid var(--line);
    margin: 0 0 24px;
    gap: 2px;
    display: flex;
    flex-wrap: wrap;       /* tabs wrap to multiple rows instead of scrolling */
    overflow: visible;     /* no scrollbar */
    row-gap: 0;
}

body.page-events-editor #nav-tab .nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -1px;
    padding: 10px 14px 12px !important;
    font-family: var(--font-sans);
    font-size: calc(13px * var(--fs-scale, 1));
    font-weight: 500;
    color: var(--ink-mute) !important;
    white-space: nowrap;
    letter-spacing: -0.005em;
    transition: color 0.12s ease, border-color 0.15s ease;
    position: relative;
}
body.page-events-editor #nav-tab .nav-link:hover {
    color: var(--ink) !important;
    border-bottom-color: var(--line-strong) !important;
}
body.page-events-editor #nav-tab .nav-link.active {
    color: var(--ink) !important;
    border-bottom-color: var(--ink) !important;
    background: transparent !important;
    font-weight: 600;
}


/* ============================================================
   03 · FORM SECTIONS (the two .col-sm-6 columns)
   ============================================================ */

body.page-events-editor .tab-content {
    padding-top: 4px;
    max-width: 1320px;
}
body.page-events-editor .tab-pane > .row > .col-sm-6,
body.page-events-editor #nav-data > .row > .col-sm-6 {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 26px 22px;
    margin-bottom: 16px;
    position: relative;
    transition: border-color 0.2s ease;
}
body.page-events-editor .tab-pane > .row > .col-sm-6:hover {
    border-color: var(--line-strong);
}

/* Section heading (first h2 inside a column-card) becomes the card title. */
body.page-events-editor #nav-data > .row > .col-sm-6,
body.page-events-editor .tab-pane > .row > .col-sm-6 {
    counter-increment: editorCard;
}
body.page-events-editor #nav-data > .row,
body.page-events-editor .tab-pane > .row {
    counter-reset: editorCard;
}
body.page-events-editor .tab-pane h2 {
    font-family: var(--font-sans);
    font-size: calc(16px * var(--fs-scale, 1));
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
/* Hide the eyebrow ::before — the tab label already names the section. */
body.page-events-editor .tab-pane h2::before {
    content: none;
}
/* Keep h2.float-start floated so title + action row share one line. */
body.page-events-editor .tab-pane h2.float-start {
    float: left;
    display: inline-flex;
    align-items: center;
    height: 38px; /* match the action-button height for clean alignment */
    margin: 0;
}


/* ============================================================
   04 · FIELDS (Bootstrap .mb-3 + .form-control + <label>)
   ============================================================ */

body.page-events-editor .mb-3 {
    margin-bottom: 18px !important;
}
body.page-events-editor .mb-3:last-child {
    margin-bottom: 0 !important;
}

/* Labels — 12.5px regular, 6px below input. .required gets a red asterisk. */
body.page-events-editor .mb-3 > label:not(.form-check-label):not(.btn),
body.page-events-editor .mb-3 > div > label.required,
body.page-events-editor .mb-3 > label {
    display: block;
    font-family: var(--font-sans);
    font-size: calc(12.5px * var(--fs-scale, 1));
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 6px;
    letter-spacing: 0;
    line-height: 1.3;
}
/* Don't inject a CSS asterisk — cloud.js's applyRequiredStyle() already appends .fa-asterisk; just style it. */
body.page-events-editor label.required .fa-asterisk {
    color: var(--red);
    font-size: calc(7px * var(--fs-scale, 1));
    margin-left: 3px;
    vertical-align: 4px;
}

/* Standard inputs — restored from BS defaults with editor polish */
body.page-events-editor .form-control:not(.summernote):not(.bcc-editor):not(textarea) {
    height: 38px;
    padding: 8px 12px;
    font-size: calc(13.5px * var(--fs-scale, 1));
    line-height: 1.4;
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    box-shadow: none;
}
body.page-events-editor .form-control:not(.summernote):not(.bcc-editor):not(textarea):hover {
    border-color: var(--ink-mute);
}
body.page-events-editor .form-control:focus,
body.page-events-editor .form-control:not(textarea):focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-bg) !important;
    outline: none;
    background-color: var(--surface);
}
body.page-events-editor textarea.form-control:not(.bcc-editor):not(.summernote) {
    min-height: 84px;
    padding: 10px 12px;
    font-size: calc(13.5px * var(--fs-scale, 1));
    line-height: 1.5;
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    resize: vertical;
}

/* Date/time picker input-groups — match the field height + alignment */
body.page-events-editor .input-group .form-control {
    height: 38px;
}
body.page-events-editor .input-group .input-group-text {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--ink-mute);
    font-size: calc(13px * var(--fs-scale, 1));
}

/* Helper text (small under fields) */
body.page-events-editor .mb-3 small,
body.page-events-editor .mb-3 .caption {
    display: block;
    font-size: calc(11.5px * var(--fs-scale, 1));
    color: var(--ink-mute);
    margin-top: 5px;
    line-height: 1.45;
    font-weight: 400;
}

/* Composite labels (label with an inline checkbox): render title and checkbox on two lines via absolute positioning. */
body.page-events-editor .mb-3 > label:has(> input[type="checkbox"]) {
    display: block !important;
    position: relative;
    padding-bottom: 22px;
    margin-bottom: 6px;
    line-height: 1.3;
    font-size: calc(12.5px * var(--fs-scale, 1));
    font-weight: 500;
    color: var(--ink-soft);
}
body.page-events-editor .mb-3 > label:has(> input[type="checkbox"]) > input[type="checkbox"] {
    position: absolute;
    left: 0;
    bottom: 1px;
    margin: 0;
    width: 13px;
    height: 13px;
    accent-color: var(--accent);
    cursor: pointer;
    border: 1.5px solid var(--line-strong);
    border-radius: 3px;
}
body.page-events-editor .mb-3 > label:has(> input[type="checkbox"]) > small {
    position: absolute;
    left: 22px;
    bottom: 0;
    font-size: calc(11.5px * var(--fs-scale, 1));
    font-weight: 400;
    color: var(--ink-mute);
    font-style: normal;
    line-height: 1.3;
    text-transform: none;
    cursor: pointer;
    margin: 0;
}
/* Soften the input below when the "same as" checkbox is checked. */
body.page-events-editor .mb-3:has(> label > input[type="checkbox"]:checked) .input-group .form-control {
    background: var(--surface-2);
    color: var(--ink-mute);
    font-style: italic;
}
body.page-events-editor .mb-3:has(> label > input[type="checkbox"]:checked) .input-group .form-control {
    background: var(--surface-2);
    color: var(--ink-mute);
    font-style: italic;
}

/* "Starting Hour For Critique": the input is INSIDE the label. */
body.page-events-editor .mb-3 > label[style*="width"] {
    display: block !important;
}
body.page-events-editor .mb-3 > label[style*="width"] > .datetimePicker {
    margin-top: 6px;
}
/* Override the library's italic placeholder styling. */
body.page-events-editor .form-control::placeholder {
    font-style: normal;
    color: var(--ink-faint);
    opacity: 1;
}

/* Kill the phantom label→Tom-Select gap: collapse the hidden original <select> and the legacy <br> after the label. */
body.page-events-editor select.tomselected.ts-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    opacity: 0 !important;
}
body.page-events-editor .mb-3 > br {
    display: none;
}
body.page-events-editor .mb-3 > .ts-wrapper {
    margin-top: 0;
}

/* Restore vertical gaps: margin-top between adjacent .row/.mb-3 siblings, and row-gap for BS5 flex-wrapped lines. */
body.page-events-editor #nav-data .row + .row,
body.page-events-editor #nav-data .row + .mb-3,
body.page-events-editor #nav-data .mb-3 + .row {
    margin-top: 1rem;
}
body.page-events-editor #nav-data .row {
    row-gap: 1rem;
}

/* ============================================================
   06b · HOST UNIT field — label + inline detail-link + Send Email chip + search input-group.
   ============================================================ */

body.page-events-editor .mb-3:has(#hostUnitChooser) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "label  action"
        "input  input";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
}
body.page-events-editor .mb-3:has(#hostUnitChooser) > label {
    grid-area: label;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}
body.page-events-editor .mb-3:has(#hostUnitChooser) > #hostUnitChooser {
    grid-area: input;
}
body.page-events-editor #hostUnitSendEmailButton {
    grid-area: action;
    float: none !important;
    height: 26px;
    line-height: 1;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: calc(11.5px * var(--fs-scale, 1));
    font-weight: 600;
    letter-spacing: 0;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    justify-self: end;
}
body.page-events-editor #hostUnitSendEmailButton::before {
    content: "\f0e0"; /* fa-envelope */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400;
    font-size: calc(11px * var(--fs-scale, 1));
}
body.page-events-editor #hostUnitSendEmailButton:hover {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
body.page-events-editor #hostUnitSendEmailButton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* "Go to unit detail" arrow icon — small clickable affordance */
body.page-events-editor #hostUnitDetails {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    color: var(--accent);
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
body.page-events-editor #hostUnitDetails:hover {
    background-color: var(--accent-bg);
    color: var(--accent-hov);
}
body.page-events-editor #hostUnitDetails i {
    font-size: calc(12.5px * var(--fs-scale, 1));
}

/* Input-group inside #hostUnitChooser — search icon button styling */
body.page-events-editor #hostUnitChooser .input-group-text {
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
body.page-events-editor #hostUnitChooser .input-group-text:hover {
    background-color: var(--accent-bg);
    color: var(--accent);
}

/* BS5 strips the input's right radius next to .input-group-text — fine at our small --r-sm. */


/* ============================================================
   07 · TIERED PRICING (Select Payment Classifications block)
   Output by WBA_EventTieringPricingHelper.php into #classifications-tiering-and-pricing.
   ============================================================ */

body.page-events-editor .pricing-section-title {
    font-size: calc(16px * var(--fs-scale, 1));
    font-weight: 600;
    color: var(--ink);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    letter-spacing: -0.005em;
}
body.page-events-editor .pricing-section-title:first-child {
    margin-top: 0;
}

body.page-events-editor .pricing-row {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
body.page-events-editor .pricing-row:last-child {
    margin-bottom: 0;
}
body.page-events-editor .pricing-row-title {
    font-size: calc(12.5px * var(--fs-scale, 1));
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: 0;
}
body.page-events-editor .pricing-row .mb-3:last-child {
    margin-bottom: 0 !important;
}
body.page-events-editor .pricing-row-warning {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: calc(11.5px * var(--fs-scale, 1));
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.page-events-editor .pricing-row-warning i {
    font-size: calc(10px * var(--fs-scale, 1));
    color: #d97706;
}

[data-theme="dark"] body.page-events-editor .pricing-row {
    background: var(--surface-2);
    border-color: var(--line);
}
[data-theme="dark"] body.page-events-editor .pricing-section-title {
    border-color: var(--line);
}
[data-theme="dark"] body.page-events-editor .pricing-row-warning {
    color: #fde68a;
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.4);
}
body.page-events-editor .ts-wrapper .ts-control {
    min-height: 38px;
    padding: 7px 12px;
    font-size: calc(13.5px * var(--fs-scale, 1));
    border-radius: var(--r-sm);
    border-color: var(--line-strong);
}
/* Tom Select attaches .form-control to .ts-wrapper → double border; strip it from the wrapper, control owns it. */
body.page-events-editor .ts-wrapper.form-control {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto;
    min-height: 0;
}
body.page-events-editor .ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-bg) !important;
}

/* Form-check rows — Cancelled, Critique Available, Same-as-X */
body.page-events-editor .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    min-height: auto;
    margin-bottom: 0;
}
body.page-events-editor .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 0;
    margin-left: 0;
    border: 1.5px solid var(--line-strong);
    background-color: var(--surface);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    flex-shrink: 0;
}
body.page-events-editor .form-check-input:hover { border-color: var(--ink-soft); }
body.page-events-editor .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-bg);
    border-color: var(--accent);
    outline: none;
}
body.page-events-editor .form-check-input:checked {
    background-color: var(--ink);
    border-color: var(--ink);
}
body.page-events-editor .form-check-label {
    font-size: calc(12.5px * var(--fs-scale, 1));
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    margin: 0;
}


/* ============================================================
   05 · TIMEZONE NOTE (the special "Timezone: ..." text)
   ============================================================ */

body.page-events-editor .mb-3:has(> text),
body.page-events-editor #nav-data .mb-3:not(:has(label)):not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(button)):not(:has(.toggle)) {
    font-family: var(--font-mono);
    font-size: calc(11.5px * var(--fs-scale, 1));
    color: var(--ink-mute);
    background: var(--surface-2);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    letter-spacing: 0.01em;
}


/* ============================================================
   06 · BOOTSTRAP-TOGGLE CONTAINER FIELDS
   ============================================================ */

body.page-events-editor .mb-3:has(> .toggle) {
    margin-bottom: 14px !important;
    padding-top: 0;
}

/* Top-of-card publishSwitch / lock-switch get a hairline below for separation. */
body.page-events-editor .col-sm-6 > .mb-3:first-child:has(.toggle),
body.page-events-editor .col-sm-6 > br + .mb-3:has(.toggle) {
    padding-bottom: 14px;
    margin-bottom: 18px !important;
    border-bottom: 1px solid var(--line);
}


/* ============================================================
   07 · ACTION COLUMNS — bottom action bars + secondary save links
   ============================================================ */

/* 07b · Restore the switch-candy slider's library blue — the global .btn-primary restyle bled into it. */
body.page-events-editor .switch-toggle.switch-candy > a.btn-primary,
body.page-events-editor .switch-toggle.switch-candy-white > a.btn-primary {
    background-color: rgb(0, 123, 255) !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), transparent) !important;
    border: 1px solid #333 !important;
    color: transparent !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

/* Dropdown btn-groups in the Schedule tab action row, scoped to #nav-schedule so other tabs keep the default BS look. */
body.page-events-editor #nav-schedule .actions > .btn-group > .dropdown-toggle.btn {
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: calc(13px * var(--fs-scale, 1));
    font-weight: 600;
    letter-spacing: 0;
    color: var(--accent) !important;
    background: var(--surface) !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--r-sm) !important;
    line-height: 1;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.page-events-editor #nav-schedule .actions > .btn-group > .dropdown-toggle.btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
body.page-events-editor #nav-schedule .actions > .btn-group > .dropdown-toggle.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-bg) !important;
}
body.page-events-editor #nav-schedule .actions > .btn-group > .dropdown-toggle.btn::after {
    margin-left: 2px;
    border-top-color: currentColor;
}
body.page-events-editor #nav-schedule .actions > .btn-group > .dropdown-toggle.btn[aria-expanded="true"] {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}


/* ============================================================
   07c · DAY-TABS-ROW — align Day pills with the data-list toolbar on one line.
   ============================================================ */
/* position-relative so pills and the absolute toolbar share a coordinate space. */
body.page-events-editor .day-tabs-row {
    position: relative;
}
/* Day pills pulled out of flow so .tab-content starts at the toolbar's top. */
body.page-events-editor .day-tabs-row > ul.nav-pills {
    position: absolute;
    top: 5px;    /* vertically centre within the ~34px toolbar row */
    left: 0;
    margin: 0 !important;
    z-index: 5;
}
/* Pills are absolute now, so clear the data-list's default margin-top. */
body.page-events-editor .day-tabs-row .data-list.data-list-auto {
    margin-top: 0;
}
/* ≤575px: toolbar reverts to static — make pills static too so they stack. */
@media (max-width: 575.98px) {
    body.page-events-editor .day-tabs-row > ul.nav-pills {
        position: static;
        margin: 0 0 8px !important;
    }
}

/* ============================================================
   08 · DATATABLES — clean editorial style
   ============================================================ */
body.page-events-editor table.dataTable,
body.page-events-editor table.table {
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
    width: 100% !important;
}
body.page-events-editor table.dataTable > thead > tr > th,
body.page-events-editor table.table > thead > tr > th {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--line) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    color: var(--ink-mute);
    font-family: var(--font-sans);
    font-size: calc(11px * var(--fs-scale, 1)) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 12px !important;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}
body.page-events-editor table.dataTable > tbody > tr > td,
body.page-events-editor table.table > tbody > tr > td {
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 10px 12px !important;
    color: var(--ink);
    vertical-align: middle;
    background: transparent;
}
body.page-events-editor table.dataTable > tbody > tr:first-child > td,
body.page-events-editor table.table > tbody > tr:first-child > td {
    border-top: 0 !important;
}
body.page-events-editor table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > td,
body.page-events-editor table.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: transparent;
}
body.page-events-editor table.dataTable > tbody > tr:hover > td,
body.page-events-editor table.table > tbody > tr:hover > td {
    background: var(--accent-bg);
}
/* Action / control cells (drag-handle, delete, edit) — fit-content width */
body.page-events-editor table.dataTable > tbody > tr > td.control,
body.page-events-editor table.dataTable > tbody > tr > td.gripper {
    width: 1%;
    white-space: nowrap;
    color: var(--ink-mute);
}
body.page-events-editor table.dataTable > tbody > tr > td.gripper {
    cursor: grab;
}
/* touch-action:none on the gripper stops the browser eating touch-drag before DataTables RowReorder sees it. */
.gripper,
td.gripper,
.dt-rowReorder-handle,
table.dataTable > tbody > tr > td.gripper,
table.dataTable > tbody > tr > td.dt-rowReorder-handle {
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
}
body.page-events-editor table.dataTable > tbody > tr > td .btn-sm,
body.page-events-editor table.table > tbody > tr > td .btn-sm {
    padding: 4px 9px;
    font-size: calc(11.5px * var(--fs-scale, 1));
}

/* DataTables wrapper bits (info, length menu, paginate) */
body.page-events-editor .dataTables_wrapper .dataTables_info,
body.page-events-editor .dataTables_wrapper .dataTables_length label,
body.page-events-editor .dataTables_wrapper .dataTables_filter label {
    color: var(--ink-mute);
    font-size: calc(11.5px * var(--fs-scale, 1));
    font-weight: 500;
}
body.page-events-editor .dataTables_wrapper .dataTables_paginate .page-link {
    border-radius: 3px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: calc(12px * var(--fs-scale, 1));
    padding: 3px 9px;
}
body.page-events-editor .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}
body.page-events-editor .dataTables_wrapper .dataTables_paginate .page-link:hover {
    background: var(--surface-2);
    color: var(--ink);
}

/* The toolbar floats above its table — give it a touch of breathing room */
body.page-events-editor .data-list .data-list-toolbar {
    margin-bottom: 8px;
}
/* Style the auto-wrapped toolbar so the toggle pill-group is right-aligned */
body.page-events-editor .data-list-auto .data-list-views,
body.page-events-editor .data-list-auto .data-list-density {
    background: var(--surface);
    border-color: var(--line);
}

/* Hide the Cards toggle when the table is empty (no rows to render as
   cards). Density (Wide/Compact) stays visible always — it's a user
   preference, not a conditional control, so it shouldn't flicker in and
   out as columns happen to fit on a given draw. */
.data-list.data-list-no-cards    .data-list-views   { display: none; }
/* If the Cards toggle is hidden (empty table), the density toggle is
   still visible — leave the toolbar in place. */

/* Dark mode */
[data-theme="dark"] body.page-events-editor table.dataTable,
[data-theme="dark"] body.page-events-editor table.table {
    border-color: var(--line) !important;
    background: var(--surface);
}
[data-theme="dark"] body.page-events-editor table.dataTable > thead > tr > th,
[data-theme="dark"] body.page-events-editor table.table > thead > tr > th {
    background: var(--surface-2) !important;
    color: var(--ink-mute);
    border-bottom-color: var(--line) !important;
}
/* Dark-mode row hover. BS5 5.3 applies hover via:
     .table-hover > tbody > tr:hover > * {
       --bs-table-color-state: var(--bs-table-hover-color);
       --bs-table-bg-state:    var(--bs-table-hover-bg);
     }
   then composes background from --bs-table-bg-state + accent-bg layers.
   The default light-on-dark values wash the row out. Lock all the table
   custom-properties to transparent / our ink color so only our own
   hover-tint shows. */
[data-theme="dark"] body.page-events-editor table.dataTable,
[data-theme="dark"] body.page-events-editor table.table {
    --bs-table-color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--ink);
    --bs-table-active-bg: transparent;
    --bs-table-active-color: var(--ink);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--ink);
    --bs-table-accent-bg: transparent;
}
/* BS5 sets the *-state vars on tr:hover > * — pin them, then apply our own dark hover tint. */
[data-theme="dark"] body.page-events-editor table.dataTable > tbody > tr:hover > *,
[data-theme="dark"] body.page-events-editor table.table > tbody > tr:hover > * {
    --bs-table-bg-state: transparent !important;
    --bs-table-color-state: var(--ink) !important;
    color: var(--ink) !important;
    background-color: rgba(255, 255, 255, 0.045) !important;
    background-image: none !important;
    box-shadow: none !important;
}
/* Force the <tr> bg transparent in dark mode so only the cell-level hover tint shows. */
[data-theme="dark"] body.page-events-editor table.dataTable > tbody > tr,
[data-theme="dark"] body.page-events-editor table.table > tbody > tr,
[data-theme="dark"] body.page-events-editor table.dataTable > tbody > tr:hover,
[data-theme="dark"] body.page-events-editor table.table > tbody > tr:hover {
    background-color: transparent !important;
    background-image: none !important;
}


body.page-events-editor a.btn-link[href*="ave"],
body.page-events-editor a.btn-link[href*="Save"] {
    font-family: var(--font-mono);
    font-size: calc(11px * var(--fs-scale, 1));
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--surface);
    transition: border-color 0.12s ease, color 0.12s ease;
    display: inline-block;
}
body.page-events-editor a.btn-link[href*="ave"]:hover,
body.page-events-editor a.btn-link[href*="Save"]:hover {
    border-color: var(--accent);
    color: var(--accent-hov);
    background: var(--accent-bg);
}


/* ============================================================
   08 · LIGHT / DARK COHERENCE
   ============================================================ */

[data-theme="dark"] body.page-events-editor #editorHeader::before {
    background: var(--ink);
    opacity: 0.85;
}
[data-theme="dark"] body.page-events-editor .form-control:focus {
    background-color: var(--surface);
}


/* === bootstrap-toggle (v2.2.2) — text-pill restyle (library is BS3/BS4, uses .btn-default which BS5 dropped) === */

/* Wrapper — keep the library's inline width; defeat BS5 .btn padding-y/min-height. */
.toggle.btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 30px !important;
    min-height: 0 !important;
    /* extra right padding for the 22px thumb — the library's inline width doesn't account for it (clips labels). */
    padding: 0 32px 0 14px !important;
    box-sizing: content-box !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0;
    --bs-btn-line-height: 1;
}
/* ON state — accent fill, soft accent border */
.toggle.btn.btn-primary,
.toggle.btn:not(.off) {
    background-color: var(--accent, #007bff) !important;
    border-color: var(--accent, #007bff) !important;
}
.toggle.btn.btn-primary:hover,
.toggle.btn:not(.off):hover {
    background-color: var(--accent-hov, #0056b3) !important;
    border-color: var(--accent-hov, #0056b3) !important;
}

/* OFF state — soft neutral fill, hairline border */
.toggle.btn.off {
    background-color: var(--surface-2, #f4f4f5) !important;
    border-color: var(--line-strong, #d4d4d8) !important;
}
.toggle.btn.off:hover {
    border-color: var(--ink-mute, #71717a) !important;
}

/* The scroller stays as the library made it — full height */
.toggle.btn .toggle-group {
    height: 100% !important;
    position: absolute;
    width: 200%;
    border-radius: 0 !important;
}

/* State labels — readable typography, full-height flex centering */
.toggle.btn .toggle-on,
.toggle.btn .toggle-off {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--font-sans, inherit);
    font-size: calc(11.5px * var(--fs-scale, 1)) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 12px 0 14px !important;
    white-space: nowrap;
}
.toggle.btn .toggle-on  { color: #fff !important; padding-right: 22px !important; }
.toggle.btn .toggle-off { color: var(--ink-mute, #71717a) !important; padding-left: 22px !important; }

/* Thumb — white circle, visible at the label boundary, centered vertically */
.toggle.btn .toggle-handle {
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    left: 50% !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.10) !important;
    z-index: 2 !important;
    pointer-events: none;
    transition: background-color 0.2s ease;
}

/* Focus ring (the inner <input> is the real focus target) */
.toggle.btn:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(0, 123, 255, 0.18)) !important;
}

/* Disabled */
.toggle.btn.disabled,
.toggle.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Dark mode */
[data-theme="dark"] .toggle.btn.off {
    background-color: var(--surface-2) !important;
    border-color: var(--line-strong) !important;
}
[data-theme="dark"] .toggle.btn .toggle-handle {
    background-color: #f4f4f5 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile overflow guard — bootstrap-toggle can inline an oversized width when initialized in a hidden tab; cap it. */
@media (max-width: 991.98px) {
    /* border-box so max-width:100% includes the pill's h-padding (desktop uses content-box). */
    .toggle.btn { max-width: 100% !important; box-sizing: border-box !important; }
}


/* === RichTextEditor license-disabled fallback === contentEditable div styled like a textarea (swap in events/editor.php). */
.rte-fallback {
    min-height: 8em;
    max-height: 24em;
    overflow-y: auto;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
    cursor: text;
}
.rte-fallback:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-bg);
}
.rte-fallback img { max-width: 100%; height: auto; }
.rte-fallback p:first-child { margin-top: 0; }
/* Hide the broken RTE wrapper when the fallback is present. */
body:has(.rte-fallback) .richtexteditor { display: none !important; }


/* === Compose-email BCC editor === contentEditable div so .emailUser pills render inline with hover tooltips. */
body.page-common-broadcast-compose-email .bcc-editor {
    min-height: 12em;
    max-height: 18em;
    overflow-y: auto;
    white-space: normal;
    word-break: break-all;
    line-height: 1.75;
    cursor: text;
}
body.page-common-broadcast-compose-email .bcc-editor:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-bg);
}
body.page-common-broadcast-compose-email .bcc-editor .emailUser {
    display: inline-block;
    margin-right: 6px;
    cursor: default;
    color: var(--ink);
}
body.page-common-broadcast-compose-email .bcc-editor .emailUser:hover {
    color: var(--accent);
}
body.page-common-broadcast-compose-email .bcc-editor .emailUser > span {
    color: var(--ink-mute);
    font-size: 0.9em;
}


/* Native (.no-ts) toolbar selects — styled to match the v15 design language
   so they blend with the segmented month-nav next to them. Padding/height
   are matched to .month-nav (34px) for visual alignment. */
body.page-events .cal-select {
    height: 34px;
    padding: 0 28px 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1.5 L5 5 L9 1.5' stroke='%2371717A' stroke-width='1.4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    width: auto;
    min-width: 120px;
    box-shadow: none;
}
body.page-events .cal-select:hover { border-color: var(--ink-mute); }
body.page-events .cal-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
#circuitSelect.cal-select { min-width: 180px; }
#yearSelect.cal-select { min-width: 90px; }
[data-theme="dark"] body.page-events .cal-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1.5 L5 5 L9 1.5' stroke='%23A1A1AA' stroke-width='1.4'/></svg>");
}

/* AJAX preloader — wraps the calendar so we can show a spinner overlay
   while the next month's data is loading without doing a full page reload. */
body.page-events .calendar-wrap {
    position: relative;
    transition: opacity 0.15s ease;
}
body.page-events .calendar-wrap.is-loading {
    opacity: 0.55;
    pointer-events: none;
}
body.page-events .calendar-wrap.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: calSpin 0.7s linear infinite;
    z-index: 5;
}
@keyframes calSpin {
    to { transform: rotate(360deg); }
}
/* #monthNav uses the shared .toolbar styles (see v15 page head section). */
body.page-events #monthNav { margin-bottom: 18px; }
body.page-events .viewStaff,
body.page-events #calendar td .btn-sm {
    margin-top: 4px;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--r-sm);
}
/* Cap Tom Select to its container so multi-select chips wrap instead of overflowing the column. */
.ts-wrapper {
    max-width: 100%;
}
.ts-wrapper .ts-control {
    max-width: 100%;
    flex-wrap: wrap;
}

/* Force the month-nav selects inline-block + auto width (.ts-wrapper defaults to block/100%). */
body.page-events #monthNav .ts-wrapper {
    display: inline-block;
    width: auto;
    min-width: 12em;
    vertical-align: middle;
    text-align: left;
    font-size: 1rem;
    margin: 0 0.25rem;
}
body.page-events .mobileDate {
    white-space: nowrap;
    color: #717171;
    font-weight: bold;
}
body.page-events .mobileDate .dayOfWeek {
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: normal;
}
body.page-events main .calendarUtils {
    margin-top: 1em;
}
body.page-events main .calendarUtils a {
    margin-right: 15px;
}

/* page-events-editor — from events/editor.php (two adjacent inline blocks) */
body.page-events-editor .buttonBar,
body.page-events-editor .totalRecords,
body.page-events-editor .thePager {
    xdisplay: none;
}
body.page-events-editor .cloneButton {
    margin-right: 50px;
}
body.page-events-editor .gripper {
    width: 10px;
}
body.page-events-editor .entry {
}
body.page-events-editor .break {
    font-weight: bold;
}
body.page-events-editor .actions .btn-group,
body.page-events-editor .actions .form-group {
    margin-left: 4px;
}
body.page-events-editor #scheduleGrid_wrapper .topUtils {
    display: none;
}
body.page-events-editor .custom-select {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: calc(16px * var(--fs-scale, 1));
    line-height: 1.5;
}
body.page-events-editor .custom-select option:nth-child(1) {
    background-color: #cce5ff;
}
body.page-events-editor .custom-select option:nth-child(2) {
    background-color: #e2e3e5;
}
body.page-events-editor .custom-select option:nth-child(3) {
    background-color: var(--state-success-bg);
}
body.page-events-editor .custom-select option:nth-child(4) {
    background-color: var(--state-danger-bg);
}
body.page-events-editor .custom-select option:nth-child(5) {
    background-color: var(--state-warning-bg);
}
body.page-events-editor .custom-select option:nth-child(6) {
    background-color: var(--state-notice-bg);
}

/* Dark mode: swap the pastel option backgrounds for dark-tinted equivalents (light fg of the same hue). */
[data-theme="dark"] body.page-events-editor .custom-select {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--line-strong) !important;
}
[data-theme="dark"] body.page-events-editor .custom-select option {
    color: var(--ink);
    background-color: var(--surface);
}
[data-theme="dark"] body.page-events-editor .custom-select option:nth-child(1) {
    background-color: rgba(59, 130, 246, 0.18);   /* primary blue */
    color: #93c5fd;
}
[data-theme="dark"] body.page-events-editor .custom-select option:nth-child(2) {
    background-color: rgba(161, 161, 170, 0.18);  /* secondary gray */
    color: #d4d4d8;
}
[data-theme="dark"] body.page-events-editor .custom-select option:nth-child(3) {
    background-color: rgba(34, 197, 94, 0.18);    /* success green */
    color: #86efac;
}
[data-theme="dark"] body.page-events-editor .custom-select option:nth-child(4) {
    background-color: rgba(239, 68, 68, 0.18);    /* danger red */
    color: #fca5a5;
}
[data-theme="dark"] body.page-events-editor .custom-select option:nth-child(5) {
    background-color: rgba(245, 158, 11, 0.18);   /* warning amber */
    color: #fcd34d;
}
[data-theme="dark"] body.page-events-editor .custom-select option:nth-child(6) {
    background-color: rgba(20, 184, 166, 0.18);   /* info teal */
    color: #5eead4;
}
body.page-events-editor #eventDaysTable th,
body.page-events-editor #eventDaysTable td { vertical-align: middle; white-space: nowrap; }
body.page-events-editor #eventDaysTable th:nth-child(1) { width: 60px; }
body.page-events-editor #eventDaysTable th:nth-child(4),
body.page-events-editor #eventDaysTable th:nth-child(5) { width: 170px; }
body.page-events-editor #eventDaysTable th:nth-child(6) { width: 110px; }
body.page-events-editor #eventDaysTable th:nth-child(7) { width: 70px; }
body.page-events-editor #eventDaysTable .input-group.date { flex-wrap: nowrap; }
body.page-events-editor #eventDaysTable .datetimepicker-input { min-width: 100px; }
body.page-events-editor .bootstrap-datetimepicker-widget.dropdown-menu {
    border: 1px solid rgba(0,0,0,.2) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.2) !important;
    padding: 12px !important;
    width: auto !important;
    min-width: 16rem !important;
}
body.page-events-editor .bootstrap-datetimepicker-widget .timepicker-hour,
body.page-events-editor .bootstrap-datetimepicker-widget .timepicker-minute,
body.page-events-editor .bootstrap-datetimepicker-widget .timepicker-second {
    font-size: calc(20px * var(--fs-scale, 1)) !important;
    font-weight: 700 !important;
    color: #333 !important;
}
body.page-events-editor .bootstrap-datetimepicker-widget table td {
    padding: 8px 10px !important;
}
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn {
    border-radius: 6px !important;
}
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="incrementHours"],
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="incrementMinutes"],
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="decrementHours"],
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="decrementMinutes"] {
    color: #495057 !important;
}
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="incrementHours"]:hover,
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="incrementMinutes"]:hover,
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="decrementHours"]:hover,
body.page-events-editor .bootstrap-datetimepicker-widget table td .btn[data-action="decrementMinutes"]:hover {
    background: #e9ecef !important;
    border-radius: 6px !important;
}
body.page-events-editor .bootstrap-datetimepicker-widget table td span.separator {
    font-size: calc(17px * var(--fs-scale, 1)) !important;
    font-weight: 700 !important;
}

/* page-events-images-editor — from events/images/editor.php */
/* overrides so it will display a box to indicate a pdf is ready to upload */
body.page-events-images-editor .dropzone .dz-details,
body.page-events-critique-schedule-editor .dropzone .dz-details,
body.page-events-default-positions-editor .dropzone .dz-details,
body.page-events-staff-assignments-editor .dropzone .dz-details,
body.page-events-add-ons-editor .dropzone .dz-details,
body.page-events-icons-editor .dropzone .dz-details,
body.page-events-waitlist-editor .dropzone .dz-details {
	display: block;
}
body.page-events-images-editor .dropzone .dz-preview,
body.page-events-critique-schedule-editor .dropzone .dz-preview,
body.page-events-default-positions-editor .dropzone .dz-preview,
body.page-events-staff-assignments-editor .dropzone .dz-preview,
body.page-events-add-ons-editor .dropzone .dz-preview,
body.page-events-icons-editor .dropzone .dz-preview,
body.page-events-waitlist-editor .dropzone .dz-preview,
body.page-events-images-editor .dropzone .dz-preview .dz-image,
body.page-events-critique-schedule-editor .dropzone .dz-preview .dz-image,
body.page-events-default-positions-editor .dropzone .dz-preview .dz-image,
body.page-events-staff-assignments-editor .dropzone .dz-preview .dz-image,
body.page-events-add-ons-editor .dropzone .dz-preview .dz-image,
body.page-events-icons-editor .dropzone .dz-preview .dz-image,
body.page-events-waitlist-editor .dropzone .dz-preview .dz-image {
	height: 120px;
}

/* page-events-attachments-editor — from events/attachments/editor.php */
/* overrides so it will display a box to indicate a pdf is ready to upload */
body.page-events-attachments-editor .dropzone .dz-details {
	display: block;
}
body.page-events-attachments-editor .dropzone .dz-preview,
body.page-events-attachments-editor .dropzone .dz-preview .dz-image {
	height: 120px;
}

/* page-events-add-ons-purchases — from events/add-ons/purchases.php */
body.page-events-add-ons-purchases .card-header {
    background-color: #cad7ff;
}
body.page-events-add-ons-purchases .stat-value {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
}
body.page-events-add-ons-purchases .stat-label {
    text-align: center;
    color: #666;
}

/* C3 — schedule-heavy pages */

/* page-events-critique-schedule-editor — was-only `.selectedRow`, now in shared utilities */
/* page-events-default-positions-assign-person-any — was-only `.selectedRow`, now in shared utilities */
/* page-events-default-positions-assign-person-other — was-only `.selectedRow`, now in shared utilities */
/* page-events-default-positions-assign-person — was-only `.selectedRow`, now in shared utilities */
/* page-events-default-positions-editor — `.selectedRow` promoted; partial rules below */
/* page-events-schedule-editor — `.selectedRow` promoted; overwrite-modal partial rules below.

   Editor polish (matches events/editor.php treatment): the h1 anchor used
   to render as a big bold blue underlined link to the parent event,
   stealing visual weight from the form. Restyle it as a quiet breadcrumb-
   like heading + give the form column more horizontal breathing room +
   stack the action row cleanly on phones. */
body.page-events-schedule-editor #editorHeader h1,
body.page-events-warmup-schedule-editor #editorHeader h1,
body.page-events-attachments-editor #editorHeader h1,
body.page-events-images-editor #editorHeader h1,
body.page-events-critique-schedule-editor #editorHeader h1,
body.page-events-default-positions-editor #editorHeader h1,
body.page-events-staff-assignments-editor #editorHeader h1,
body.page-events-add-ons-editor #editorHeader h1,
body.page-events-icons-editor #editorHeader h1,
body.page-events-waitlist-editor #editorHeader h1,
body.page-events-add-ons-purchases #editorHeader h1 {
	font-size: calc(20px * var(--fs-scale, 1));
	margin: 0;
	line-height: 1.3;
}
body.page-events-schedule-editor #editorHeader h1 a,
body.page-events-warmup-schedule-editor #editorHeader h1 a,
body.page-events-attachments-editor #editorHeader h1 a,
body.page-events-images-editor #editorHeader h1 a,
body.page-events-critique-schedule-editor #editorHeader h1 a,
body.page-events-default-positions-editor #editorHeader h1 a,
body.page-events-staff-assignments-editor #editorHeader h1 a,
body.page-events-add-ons-editor #editorHeader h1 a,
body.page-events-icons-editor #editorHeader h1 a,
body.page-events-waitlist-editor #editorHeader h1 a,
body.page-events-add-ons-purchases #editorHeader h1 a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}
body.page-events-schedule-editor #editorHeader h1 a:hover,
body.page-events-warmup-schedule-editor #editorHeader h1 a:hover,
body.page-events-attachments-editor #editorHeader h1 a:hover,
body.page-events-images-editor #editorHeader h1 a:hover,
body.page-events-critique-schedule-editor #editorHeader h1 a:hover,
body.page-events-default-positions-editor #editorHeader h1 a:hover,
body.page-events-staff-assignments-editor #editorHeader h1 a:hover,
body.page-events-add-ons-editor #editorHeader h1 a:hover,
body.page-events-icons-editor #editorHeader h1 a:hover,
body.page-events-waitlist-editor #editorHeader h1 a:hover,
body.page-events-add-ons-purchases #editorHeader h1 a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.page-events-schedule-editor #editorHeader .editorHeaderButtons,
body.page-events-warmup-schedule-editor #editorHeader .editorHeaderButtons,
body.page-events-attachments-editor #editorHeader .editorHeaderButtons,
body.page-events-images-editor #editorHeader .editorHeaderButtons,
body.page-events-critique-schedule-editor #editorHeader .editorHeaderButtons,
body.page-events-default-positions-editor #editorHeader .editorHeaderButtons,
body.page-events-staff-assignments-editor #editorHeader .editorHeaderButtons,
body.page-events-add-ons-editor #editorHeader .editorHeaderButtons,
body.page-events-icons-editor #editorHeader .editorHeaderButtons,
body.page-events-waitlist-editor #editorHeader .editorHeaderButtons,
body.page-events-add-ons-purchases #editorHeader .editorHeaderButtons {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	align-items: center;
}
/* Purchases page: give the ghost "Back to Event" .btn-outline-secondary a visible border so it doesn't read as plain text. */
body.page-events-add-ons-purchases #editorHeader .editorHeaderButtons > .btn-outline-secondary {
	border-color: var(--line);
	background: var(--surface);
	color: var(--ink);
}
body.page-events-add-ons-purchases #editorHeader .editorHeaderButtons > .btn-outline-secondary:hover {
	background: var(--surface-2);
	color: var(--ink);
	border-color: var(--line-strong, var(--line));
}
/* Section heading sits tighter to the form. */
body.page-events-schedule-editor h2,
body.page-events-warmup-schedule-editor h2,
body.page-events-attachments-editor h2,
body.page-events-images-editor h2,
body.page-events-critique-schedule-editor h2,
body.page-events-default-positions-editor h2,
body.page-events-staff-assignments-editor h2,
body.page-events-add-ons-editor h2,
body.page-events-icons-editor h2,
body.page-events-waitlist-editor h2 {
	font-size: calc(18px * var(--fs-scale, 1));
	margin: 0 0 0.5rem;
	font-weight: 600;
}
/* The col-sm-4 offset-sm-4 form column is too narrow on tablet — widen it, full-width on phones. */
@media (max-width: 991.98px) {
	body.page-events-schedule-editor .col-sm-4.offset-sm-4,
	body.page-events-warmup-schedule-editor .col-sm-4.offset-sm-4,
	body.page-events-attachments-editor .col-sm-4.offset-sm-4,
	body.page-events-images-editor .col-sm-4.offset-sm-4,
	body.page-events-critique-schedule-editor .col-sm-4.offset-sm-4,
	body.page-events-default-positions-editor .col-sm-4.offset-sm-4,
	body.page-events-staff-assignments-editor .col-sm-4.offset-sm-4,
	body.page-events-add-ons-editor .col-sm-4.offset-sm-4,
	body.page-events-icons-editor .col-sm-4.offset-sm-4,
	body.page-events-waitlist-editor .col-sm-4.offset-sm-4 {
		flex: 0 0 auto;
		width: 66.6667%;
		margin-left: 16.6667%;
	}
}
@media (max-width: 575.98px) {
	body.page-events-schedule-editor .col-sm-4.offset-sm-4,
	body.page-events-warmup-schedule-editor .col-sm-4.offset-sm-4,
	body.page-events-attachments-editor .col-sm-4.offset-sm-4,
	body.page-events-images-editor .col-sm-4.offset-sm-4,
	body.page-events-critique-schedule-editor .col-sm-4.offset-sm-4,
	body.page-events-default-positions-editor .col-sm-4.offset-sm-4,
	body.page-events-staff-assignments-editor .col-sm-4.offset-sm-4,
	body.page-events-add-ons-editor .col-sm-4.offset-sm-4,
	body.page-events-icons-editor .col-sm-4.offset-sm-4,
	body.page-events-waitlist-editor .col-sm-4.offset-sm-4 {
		width: 100%;
		margin-left: 0;
	}
	/* Action row stacks: title full-width on top, buttons full-width below. */
	body.page-events-schedule-editor #editorHeader .col-8,
	body.page-events-schedule-editor #editorHeader .col-4,
	body.page-events-warmup-schedule-editor #editorHeader .col-8,
	body.page-events-warmup-schedule-editor #editorHeader .col-4,
	body.page-events-attachments-editor #editorHeader .col-8,
	body.page-events-attachments-editor #editorHeader .col-4,
	body.page-events-images-editor #editorHeader .col-8,
	body.page-events-critique-schedule-editor #editorHeader .col-8,
	body.page-events-default-positions-editor #editorHeader .col-8,
	body.page-events-staff-assignments-editor #editorHeader .col-8,
	body.page-events-add-ons-editor #editorHeader .col-8,
	body.page-events-icons-editor #editorHeader .col-8,
	body.page-events-waitlist-editor #editorHeader .col-8,
	body.page-events-images-editor #editorHeader .col-4,
	body.page-events-critique-schedule-editor #editorHeader .col-4,
	body.page-events-default-positions-editor #editorHeader .col-4,
	body.page-events-staff-assignments-editor #editorHeader .col-4,
	body.page-events-add-ons-editor #editorHeader .col-4,
	body.page-events-icons-editor #editorHeader .col-4,
	body.page-events-waitlist-editor #editorHeader .col-4,
	body.page-events-add-ons-purchases #editorHeader .col,
	/* These editors use bare `.col` for both action-row halves — match it too. */
	body.page-events-add-ons-editor #editorHeader .col,
	body.page-events-icons-editor #editorHeader .col,
	body.page-events-waitlist-editor #editorHeader .col {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
	body.page-events-schedule-editor #editorHeader .editorHeaderButtons,
	body.page-events-warmup-schedule-editor #editorHeader .editorHeaderButtons,
	body.page-events-attachments-editor #editorHeader .editorHeaderButtons,
	body.page-events-images-editor #editorHeader .editorHeaderButtons,
	body.page-events-critique-schedule-editor #editorHeader .editorHeaderButtons,
	body.page-events-default-positions-editor #editorHeader .editorHeaderButtons,
	body.page-events-staff-assignments-editor #editorHeader .editorHeaderButtons,
	body.page-events-add-ons-editor #editorHeader .editorHeaderButtons,
	body.page-events-icons-editor #editorHeader .editorHeaderButtons,
	body.page-events-waitlist-editor #editorHeader .editorHeaderButtons,
	body.page-events-add-ons-purchases #editorHeader .editorHeaderButtons {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.5rem;
		margin-top: 0.75rem;
	}
	body.page-events-schedule-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-warmup-schedule-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-attachments-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-images-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-critique-schedule-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-default-positions-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-staff-assignments-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-add-ons-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-icons-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-waitlist-editor #editorHeader .editorHeaderButtons > .btn,
	body.page-events-add-ons-purchases #editorHeader .editorHeaderButtons > .btn {
		width: 100%;
	}
	/* Purchases ghost "Back to Event" button: restore a border so it reads as a button when stacked alone. */
	body.page-events-add-ons-purchases #editorHeader .editorHeaderButtons > .btn-outline-secondary {
		border-color: var(--line) !important;
		background: var(--surface);
		color: var(--ink);
	}
}

/* page-events-warmup-schedule-editor — was-only `.selectedRow`, now in shared utilities */

/* page-events-schedule-usb-announcer-script — from events/schedule/usb/announcer-script.php (print/announcer page). */
body.page-events-schedule-usb-announcer-script {
    background-color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
    padding: 0px;
}
@media print {
    body.page-events-schedule-usb-announcer-script {
        font-family: -apple-system, "Roboto", "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif !important;
        text-align: justify;
    }
}
body.page-events-schedule-usb-announcer-script header,
body.page-events-schedule-usb-announcer-script footer,
/* Also hide the BS5 app-shell chrome (.sidebar / .actionbar) so the script stays a clean standalone document. */
body.page-events-schedule-usb-announcer-script .sidebar,
body.page-events-schedule-usb-announcer-script .actionbar {
    display: none;
}
/* Collapse the sidebar|main grid to one full-width column; inner <main> keeps its 5em margins (below). */
body.page-events-schedule-usb-announcer-script .shell { display: block; }
body.page-events-schedule-usb-announcer-script main.main { margin: 0; padding: 0; }
body.page-events-schedule-usb-announcer-script main {
    margin-top: 0px;
    margin-left: 5em;
    margin-right: 5em;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
body.page-events-schedule-usb-announcer-script .spielWrapper {
    margin-top: 1em;
}
body.page-events-schedule-usb-announcer-script #devBar {
    display: none;
}
body.page-events-schedule-usb-announcer-script .instructions {
    font-size: 0.8em;
    text-align: center;
}
body.page-events-schedule-usb-announcer-script .dialog {
    font-family: monospace;
    border: 1px solid silver;
    padding: 1em;
    padding-bottom: 0px;
    font-size: 1.2em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
body.page-events-schedule-usb-announcer-script .dialog .instructions {
    font-family: initial;
    font-size: 0.6em;
}
body.page-events-schedule-usb-announcer-script .dialog .instructions {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
    padding: 0px;
}
@media print {
    body.page-events-schedule-usb-announcer-script .dialog .instructions {
        font-family: -apple-system, "Roboto", "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif !important;
    }
}
body.page-events-schedule-usb-announcer-script .phonetic {
    xfont-family: monospace;
    font-weight: normal;
    xfont-size: 1.2em;
    color: #888888;
}
body.page-events-schedule-usb-announcer-script h2.eventNameDate {
    text-transform: uppercase;
    font-size: 0.8em;
}
body.page-events-schedule-usb-announcer-script .act {
    margin-top: 10px;
    text-align: center;
}
body.page-events-schedule-usb-announcer-script .additionalNotes {
    font-size: 0.8em;
}
body.page-events-schedule-usb-announcer-script .pageBreak {
    page-break-after: always;
}
body.page-events-schedule-usb-announcer-script .otherBlock {
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px;
}
body.page-events-schedule-usb-announcer-script .otherBlock .description {
    font-size: 2.5em;
    font-weight: bold;
}
body.page-events-schedule-usb-announcer-script .dialog .instructions {
    color: red;
}
body.page-events-schedule-usb-announcer-script .fillIn {
    color: red;
}
body.page-events-schedule-usb-announcer-script .opening {
    padding: 15px;
    border: 1px dashed silver;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
body.page-events-schedule-usb-announcer-script .logo {
    text-align: center;
    margin-bottom: 1em;
}
body.page-events-schedule-usb-announcer-script .logo img {
    width: 60%;
}

/* page-events-schedule-wba-announcer-script — from events/schedule/wba/announcer-script.php */
body.page-events-schedule-wba-announcer-script {
    background-color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
    padding: 0px;
}
@media print {
    body.page-events-schedule-wba-announcer-script {
        font-family: -apple-system, "Roboto", "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif !important;
    }
}
body.page-events-schedule-wba-announcer-script header,
body.page-events-schedule-wba-announcer-script footer,
/* Also hide the BS5 app-shell chrome (.sidebar / .actionbar) so the script stays a clean standalone document. */
body.page-events-schedule-wba-announcer-script .sidebar,
body.page-events-schedule-wba-announcer-script .actionbar {
    display: none;
}
/* Collapse the sidebar|main grid to one full-width column; inner <main> keeps its 5em margins (below). */
body.page-events-schedule-wba-announcer-script .shell { display: block; }
body.page-events-schedule-wba-announcer-script main.main { margin: 0; padding: 0; }
body.page-events-schedule-wba-announcer-script main {
    margin-top: 0px;
    margin-left: 5em;
    margin-right: 5em;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
body.page-events-schedule-wba-announcer-script .spielWrapper {
    margin-top: 1em;
}
body.page-events-schedule-wba-announcer-script #devBar {
    display: none;
}
body.page-events-schedule-wba-announcer-script .instructions {
    font-size: 1em;
    text-align: center;
}
body.page-events-schedule-wba-announcer-script .dialog {
    font-family: monospace;
    border: 1px solid silver;
    padding: 1em;
    padding-bottom: 0px;
    font-size: 1.4em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
body.page-events-schedule-wba-announcer-script .dialog .instructions {
    text-align: none;
    font-family: initial;
    font-size: 0.8em;
}
body.page-events-schedule-wba-announcer-script .dialog .instructions {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
    padding: 0px;
}
@media print {
    body.page-events-schedule-wba-announcer-script .dialog .instructions {
        font-family: -apple-system, "Roboto", "Segoe UI", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif !important;
    }
}
body.page-events-schedule-wba-announcer-script .phonetic {
    xfont-family: monospace;
    font-weight: normal;
    xfont-size: 1.4em;
    color: #888888;
}
body.page-events-schedule-wba-announcer-script h2.eventNameDate {
    text-transform: uppercase;
    font-size: 1em;
}
body.page-events-schedule-wba-announcer-script .act {
    margin-top: 10px;
    text-align: center;
}
body.page-events-schedule-wba-announcer-script .additionalNotes {
    font-size: 1em;
}
body.page-events-schedule-wba-announcer-script .pageBreak {
    page-break-after: always;
}
body.page-events-schedule-wba-announcer-script .otherBlock {
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px;
}
body.page-events-schedule-wba-announcer-script .otherBlock .description {
    font-size: 2.8em;
    font-weight: bold;
}
body.page-events-schedule-wba-announcer-script .dialog .instructions {
    color: red;
}
body.page-events-schedule-wba-announcer-script .fillIn {
    color: red;
}
body.page-events-schedule-wba-announcer-script .opening {
    padding: 15px;
    border: 1px dashed silver;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
body.page-events-schedule-wba-announcer-script .logo {
    text-align: center;
    margin-bottom: 1em;
}
body.page-events-schedule-wba-announcer-script .logo img {
    width: 60%;
}

/* C4 — modal/partial-heavy pages + wrapper */

/* page-common-broadcast-compose-email — from common/broadcast/compose-email.php */
/* overrides so it will display a box to indicate a pdf is ready to upload */
body.page-common-broadcast-compose-email .dropzone .dz-details {
    display: block;
}
body.page-common-broadcast-compose-email .dropzone .dz-preview,
body.page-common-broadcast-compose-email .dropzone .dz-preview .dz-image {
    height: 120px;
}
body.page-common-broadcast-compose-email .dropzone .dz-preview {
    margin-bottom: 2rem;
}
body.page-common-broadcast-compose-email #sendProgressOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}
body.page-common-broadcast-compose-email #sendProgressOverlay.active { display: flex; }
body.page-common-broadcast-compose-email #sendProgressCard {
    background: #fff;
    border-radius: 8px;
    padding: 2rem 2.5rem;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    text-align: center;
}
body.page-common-broadcast-compose-email #sendProgressCard .progress { height: 22px; border-radius: 6px; }
body.page-common-broadcast-compose-email #sendProgressCard .progress-bar {
    transition: width 0.4s ease;
    font-size: 0.8rem;
    font-weight: 600;
}
body.page-common-broadcast-compose-email #sendProgressIcon {
    font-size: 2.4rem;
    color: #095170;
    margin-bottom: 0.75rem;
}
body.page-common-broadcast-compose-email #sendProgressTitle {
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    color: #095170;
    margin-bottom: 0.25rem;
}
body.page-common-broadcast-compose-email #sendProgressStatus {
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
body.page-common-broadcast-compose-email #sendProgressDetail {
    color: #888;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

/* page-common-broadcast-compose-text-message — from common/broadcast/compose-text-message.php */
body.page-common-broadcast-compose-text-message x#theCount {
    xfont-size: 2em;
    color: #999999;
    display: inline-block;
    padding-top: 10px;
    font-weight: bold;
    float: right;
}

/* page-reports-addon-purchases — from reports/addon-purchases/index.php */
body.page-reports-addon-purchases .stat-value {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
}
body.page-reports-addon-purchases .stat-label {
    text-align: center;
    color: #666;
}

/* page-reports-dashboard — from reports/dashboard/index.php */
body.page-reports-dashboard .card-header {
    background-color: #cad7ff;
}

/* page-reports-staff-report — from reports/staff-report/index.php */
body.page-reports-staff-report .dataTables_wrapper {
    position: relative;
}
body.page-reports-staff-report .dataTables_scrollBody {
    overflow-x: auto;
}
body.page-reports-staff-report .dataTables_scrollHead,
body.page-reports-staff-report .dataTables_scrollHeadInner {
    overflow: auto !important;
}
body.page-reports-staff-report .dataTables_scrollHeadInner {
    width: 100% !important;
}

/* page-scheduling-event-monitored-dates-editor — from
   scheduling/event-monitored-dates/editor.php */
body.page-scheduling-event-monitored-dates-editor #startDatetimePickerOther .day.disabled {
    color: white;
    background-color: lawngreen;
}

/* (partial) available-person-chooser-grid — namespaced under parent
   page-scheduling-event-monitored-dates-editor */
body.page-scheduling-event-monitored-dates-editor .custom-width {
    width: 50px;
}

/* page-scheduling-expenses — from scheduling/expenses/index.php (block 1; modal-* partials namespace here too). */
body.page-scheduling-expenses .openSettings {
    border: 1px solid #7D7D7D !important;
    padding: 5px 12px 6px 12px;
}
body.page-scheduling-expenses .filter-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 9999;
    padding: .5rem;
    background-color: white;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
body.page-scheduling-expenses .filter-dropdown .form-check {
    width: max-content;
    margin-bottom: .5rem;
}
body.page-scheduling-expenses .filter-dropdown p {
    font-weight: bolder;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}
body.page-scheduling-expenses .filter-dropdown span {
    display: block;
    margin-bottom: .25rem;
}
body.page-scheduling-expenses .filter-dropdown .form-date {
    display: flex;
    column-gap: .4rem;
    align-items: center;
}
body.page-scheduling-expenses .filter-dropdown .form-date span {
    margin: 0;
}
body.page-scheduling-expenses #myModalLarge {
    z-index: 10000;
}

/* (partials of page-scheduling-expenses) the modal-* partials share these base modal-header / modal-title rules. */
body.page-scheduling-expenses .modal-header {
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
body.page-scheduling-expenses .modal-title {
    line-height: 24px;
    font-size: 20px;
}
/* File-upload modals keep the inherited .modal-title size. */
body.page-scheduling-expenses #myModalLarge .modal-title,
body.page-scheduling-expenses #expensesModal .modal-title {
    font-size: inherit;
}
body.page-scheduling-expenses #approvalCircuit,
body.page-scheduling-expenses #circuit {
    background: #7D7D7D;
    color: #fff;
}
body.page-scheduling-expenses .approver-row {
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
}
body.page-scheduling-expenses .remove-approver {
    line-height: 1;
}
body.page-scheduling-expenses .card {
    border: 0;
}
body.page-scheduling-expenses .card-body {
    border-radius: 10px;
    background: #F6F6F6;
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}
body.page-scheduling-expenses .card-secondary {
    border-radius: 10px;
    background: rgba(0, 129, 255, 0.10);
    border: 0;
}
body.page-scheduling-expenses .additional-pay-container {
    border-radius: 10px;
    background-color: #F6F6F6;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.page-scheduling-expenses #newRangeButton {
    margin-top: 15px;
    color: #007BFE;
    background-color: #007BFF12;
    border: unset;
}
body.page-scheduling-expenses .additionalPay.pay-main {
    border-radius: 10px;
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}
body.page-scheduling-expenses .file-info {
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 24px;
}
body.page-scheduling-expenses .file-name {
    max-width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* page-scheduling-expenses — from scheduling/expenses/index.php (block 2,
   the data-grid + export-overlay block) */
body.page-scheduling-expenses #grid thead {
    border: none;
    font-size: 18px;
}
body.page-scheduling-expenses #grid thead th {
    border: none;
    border-bottom: 1px solid #dee2e6;
}
body.page-scheduling-expenses .table td,
body.page-scheduling-expenses .table th {
    padding: .75rem;
    vertical-align: middle;
    border-top: none;
    border-bottom: 1px solid #dee2e6;
    cursor: default;
}
body.page-scheduling-expenses td.addExpense {
    color: #007BFF;
    font-family: Helvetica;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
    text-decoration-line: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
body.page-scheduling-expenses .text-small {
    font-size: 12px;
    font-weight: 500;
}
body.page-scheduling-expenses td.expenseAction {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.2px;
}
body.page-scheduling-expenses .form-check {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    background: #F6F6F6;
    gap: 7px;
}
body.page-scheduling-expenses .check-input-custom {
    margin-top: 3px;
}

/* Dark mode: re-map the expenses UI's hardcoded light colours to theme tokens. */
[data-theme="dark"] body.page-scheduling-expenses .card-body,
[data-theme="dark"] body.page-scheduling-expenses .additional-pay-container,
[data-theme="dark"] body.page-scheduling-expenses .form-check {
    background: var(--surface-2);
}
[data-theme="dark"] body.page-scheduling-expenses .card-secondary {
    background: var(--accent-bg);
}
[data-theme="dark"] body.page-scheduling-expenses .additionalPay.pay-main,
[data-theme="dark"] body.page-scheduling-expenses .file-info {
    background: var(--surface);
    border-color: var(--line);
}
[data-theme="dark"] body.page-scheduling-expenses td.addExpense,
[data-theme="dark"] body.page-scheduling-expenses #newRangeButton {
    color: var(--accent);
}
[data-theme="dark"] body.page-scheduling-expenses #newRangeButton {
    background-color: var(--accent-bg);
}
[data-theme="dark"] body.page-scheduling-expenses #grid thead th,
[data-theme="dark"] body.page-scheduling-expenses .table td,
[data-theme="dark"] body.page-scheduling-expenses .table th {
    border-bottom-color: var(--line);
}

body.page-scheduling-expenses .expensesGridRow {
    /* drop the side padding (was 20px 100px) that clipped the grid's right edge */
    padding: 12px 0;
}
@media (max-width: 991.98px) {
    body.page-scheduling-expenses .expensesGridRow {
        padding: 20px 0;
    }
}
body.page-scheduling-expenses .btn-light {
    background: #7D7D7D;
    color: #fff;
}
body.page-scheduling-expenses .filter-option-inner-inner {
    color: #fff;
}
body.page-scheduling-expenses #exportLoadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.95) 0%, rgba(0, 40, 80, 0.95) 100%);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}
body.page-scheduling-expenses #exportLoadingOverlay.show,
body.page-scheduling-expenses #exportLoadingOverlay[style*="block"] {
    display: flex !important;
}
body.page-scheduling-expenses .loading-content {
    text-align: center;
    color: #fff;
    padding: 50px 60px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    max-width: 420px;
}
body.page-scheduling-expenses .loading-content h2 {
    margin: 30px 0 10px;
    font-size: 26px;
    font-weight: 600;
    background: linear-gradient(90deg, #fff, #64B5F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.page-scheduling-expenses .loading-content p {
    margin: 0 0 5px;
    font-size: 16px;
    opacity: 0.85;
    color: #B0BEC5;
}
body.page-scheduling-expenses .loading-content .loading-subtext {
    font-size: 13px;
    opacity: 0.6;
    margin-top: 20px;
    color: #78909C;
}
body.page-scheduling-expenses .loader-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
body.page-scheduling-expenses .loader-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 3px solid transparent;
}
body.page-scheduling-expenses .loader-ring:nth-child(1) {
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-top-color: #2196F3;
    border-bottom-color: #2196F3;
    animation: spin 2s linear infinite;
}
body.page-scheduling-expenses .loader-ring:nth-child(2) {
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-left-color: #64B5F6;
    border-right-color: #64B5F6;
    animation: spin 1.5s linear infinite reverse;
}
body.page-scheduling-expenses .loader-ring:nth-child(3) {
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-top-color: #90CAF9;
    border-bottom-color: #90CAF9;
    animation: spin 1s linear infinite;
}
body.page-scheduling-expenses .loader-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    background: linear-gradient(135deg, #2196F3, #64B5F6);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(33, 150, 243, 0.6);
}
body.page-scheduling-expenses .loading-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 15px 0;
}
body.page-scheduling-expenses .loading-dots span {
    width: 10px;
    height: 10px;
    background: #2196F3;
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite;
}
body.page-scheduling-expenses .loading-dots span:nth-child(1) {
    animation-delay: 0s;
}
body.page-scheduling-expenses .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
body.page-scheduling-expenses .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(33, 150, 243, 0.6); }
    50% { transform: scale(1.15); box-shadow: 0 0 50px rgba(33, 150, 243, 0.9); }
}
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}
body.page-scheduling-expenses #cancelExportBtn {
    margin-top: 25px;
    padding: 10px 25px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
body.page-scheduling-expenses #cancelExportBtn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}
body.page-scheduling-expenses #cancelExportBtn:active {
    transform: scale(0.98);
}

/* page-scheduling-expenses-invoice-expense-view — from scheduling/expenses/invoice-expense-view.php (standalone print page, no Wrapper). */
body.page-scheduling-expenses-invoice-expense-view {
    font-family: DejaVu Sans, Arial, sans-serif;
    font-size: 12px;
    color: #000;
    margin: 40px 45px;
}
body.page-scheduling-expenses-invoice-expense-view .top-row { width: 100%; }
body.page-scheduling-expenses-invoice-expense-view .top-left,
body.page-scheduling-expenses-invoice-expense-view .top-right { vertical-align: top; }
body.page-scheduling-expenses-invoice-expense-view .top-left { width: 40%; }
body.page-scheduling-expenses-invoice-expense-view .top-right { width: 60%; text-align: right; }
body.page-scheduling-expenses-invoice-expense-view .org-name { font-size: 20px; font-weight: bold; }
body.page-scheduling-expenses-invoice-expense-view .invoice-label { font-size: 20px; font-weight: bold; }
body.page-scheduling-expenses-invoice-expense-view .org-address { margin-top: 12px; line-height: 1.4; }
body.page-scheduling-expenses-invoice-expense-view .logo { margin-top: 10px; }
body.page-scheduling-expenses-invoice-expense-view .logo img { height: 50px; }
body.page-scheduling-expenses-invoice-expense-view .spacer { height: 40px; }
body.page-scheduling-expenses-invoice-expense-view .billto-row {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 25px;
}
body.page-scheduling-expenses-invoice-expense-view .billto-left,
body.page-scheduling-expenses-invoice-expense-view .billto-right { vertical-align: top; }
body.page-scheduling-expenses-invoice-expense-view .billto-left { width: 50%; }
body.page-scheduling-expenses-invoice-expense-view .billto-right { width: 50%; text-align: right; }
body.page-scheduling-expenses-invoice-expense-view .billto-label { font-weight: bold; margin-bottom: 4px; }
body.page-scheduling-expenses-invoice-expense-view .meta-label { font-weight: bold; }
body.page-scheduling-expenses-invoice-expense-view .invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 12px;
}
body.page-scheduling-expenses-invoice-expense-view .invoice-table th,
body.page-scheduling-expenses-invoice-expense-view .invoice-table td {
    padding: 8px 10px;
    border: 1px solid #cccccc;
    vertical-align: top;
}
body.page-scheduling-expenses-invoice-expense-view .invoice-table th {
    background-color: #f0f0f0;
    font-weight: bold;
}
body.page-scheduling-expenses-invoice-expense-view .col-description { width: 75%; }
body.page-scheduling-expenses-invoice-expense-view .col-amount { width: 25%; text-align: right; }
body.page-scheduling-expenses-invoice-expense-view .total-row td { font-weight: bold; font-size: 13px; }
body.page-scheduling-expenses-invoice-expense-view .total-label { text-align: right; }
body.page-scheduling-expenses-invoice-expense-view .total-amount { text-align: right; }
body.page-scheduling-expenses-invoice-expense-view .receipts-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 10px;
}
body.page-scheduling-expenses-invoice-expense-view .receipt-block { margin-top: 15px; }
body.page-scheduling-expenses-invoice-expense-view .receipt-caption { font-weight: bold; margin-bottom: 5px; }
body.page-scheduling-expenses-invoice-expense-view .receipt-description { font-size: 11px; margin-bottom: 8px; }
body.page-scheduling-expenses-invoice-expense-view .receipt-image {
    max-width: 100%;
    max-height: 900px;
    border: 1px solid #ccc;
}
body.page-scheduling-expenses-invoice-expense-view .page-break {
    page-break-before: always;
}

/* page-scheduling-expenses-print-expenses — from scheduling/expenses/print-expenses.php
   (two adjacent inline blocks: filter-dropdown + modal-* base) */
body.page-scheduling-expenses-print-expenses .openSettings {
    border: 1px solid #7D7D7D !important;
    padding: 5px 12px 6px 12px;
}
body.page-scheduling-expenses-print-expenses .filter-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 9999;
    padding: .5rem;
    background-color: white;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
body.page-scheduling-expenses-print-expenses .filter-dropdown .form-check {
    width: max-content;
    margin-bottom: .5rem;
}
body.page-scheduling-expenses-print-expenses .filter-dropdown p {
    font-weight: bolder;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}
body.page-scheduling-expenses-print-expenses .filter-dropdown span {
    display: block;
    margin-bottom: .25rem;
}
body.page-scheduling-expenses-print-expenses .filter-dropdown .form-date {
    display: flex;
    column-gap: .4rem;
    align-items: center;
}
body.page-scheduling-expenses-print-expenses .filter-dropdown .form-date span {
    margin: 0;
}
body.page-scheduling-expenses-print-expenses #myModalLarge {
    z-index: 10000;
}
body.page-scheduling-expenses-print-expenses .modal-header {
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
body.page-scheduling-expenses-print-expenses .modal-title {
    line-height: 24px;
}
body.page-scheduling-expenses-print-expenses .file-info {
    border-radius: 5px;
    border: 1px solid #BCBCBC;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 24px;
}
body.page-scheduling-expenses-print-expenses .file-name {
    max-width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* (partials) default-positions _staff_* render in two body contexts (standalone editor + page-events-editor) — scope both. */
body.page-events-default-positions-editor .modal-card,
body.page-events-editor .modal-card {
    border-radius: 10px;
    background: #F4F4F4;
    padding: 10px;
    cursor: pointer;
}
body.page-events-default-positions-editor .cards,
body.page-events-editor .cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}
body.page-events-default-positions-editor .staff,
body.page-events-editor .staff {
    gap: 10px;
    max-height: 72vh;
    overflow-x: hidden;
    overflow-y: auto;
}
body.page-events-default-positions-editor .f-14,
body.page-events-editor .f-14 { font-size: calc(14px * var(--fs-scale, 1)); }
body.page-events-default-positions-editor .f-12,
body.page-events-editor .f-12 { font-size: calc(12px * var(--fs-scale, 1)); }
body.page-events-default-positions-editor .f-10,
body.page-events-editor .f-10 { font-size: calc(10px * var(--fs-scale, 1)); }
body.page-events-default-positions-editor .active-card,
body.page-events-editor .active-card { cursor: pointer; }
body.page-events-default-positions-editor .active-card:hover,
body.page-events-default-positions-editor .active-card:focus,
body.page-events-editor .active-card:hover,
body.page-events-editor .active-card:focus {
    background-color: #F2F2F2;
}
body.page-events-default-positions-editor .disabled-card,
body.page-events-editor .disabled-card {
    cursor: not-allowed;
}
/* (partial) events/schedule/overwrite-announcer-script-modal — child of page-events-schedule-editor */
body.page-events-schedule-editor .dropzone .dz-details {
    display: block;
}
body.page-events-schedule-editor .dropzone .dz-preview,
body.page-events-schedule-editor .dropzone .dz-preview .dz-image {
    height: 120px;
}

/* (partial) people/person-form/_ajax_expense_additional_pay — fragment used by people/editor.php */
body.page-people-editor .unitProductionPeople th {
    text-transform: uppercase;
    color: #aaaaaa;
    font-size: 0.8em;
}

/* (partial) admin/audit-logs/partials/row-detail — child of page-admin-audit-logs-view */
body.page-admin-audit-logs-view .auditDetail { max-width: 1100px; }
body.page-admin-audit-logs-view .auditDetail dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 20px; }
body.page-admin-audit-logs-view .auditDetail dt { font-weight: 600; color: #555; }
body.page-admin-audit-logs-view .auditDetail dd { margin: 0; word-break: break-word; }
body.page-admin-audit-logs-view .auditDetail .sectionHeader { margin-top: 30px; margin-bottom: 10px; font-weight: 600; font-size: 1.1em; border-bottom: 1px solid #dee2e6; padding-bottom: 4px; }
body.page-admin-audit-logs-view .auditDetail .diffTable td,
body.page-admin-audit-logs-view .auditDetail .diffTable th { vertical-align: top; padding: 6px 10px; }
body.page-admin-audit-logs-view .auditDetail .diffTable .fieldName { font-family: monospace; font-weight: 600; }
body.page-admin-audit-logs-view .auditDetail .diffTable .oldValue { color: var(--state-danger-strong); background: var(--state-danger-bg); }
body.page-admin-audit-logs-view .auditDetail .diffTable .newValue { color: #155724; background: var(--state-success-bg); }
body.page-admin-audit-logs-view .auditDetail pre.jsonBlock { background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 4px; padding: 10px; font-size: 0.85em; max-height: 400px; overflow: auto; }
body.page-admin-audit-logs-view .auditDetail .severity-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 0.85em; text-transform: uppercase; }
body.page-admin-audit-logs-view .auditDetail .severity-pill.severity-info     { background: #e2e3e5; color: #383d41; }
body.page-admin-audit-logs-view .auditDetail .severity-pill.severity-notice   { background: var(--state-notice-bg); color: #0c5460; }
body.page-admin-audit-logs-view .auditDetail .severity-pill.severity-warning  { background: var(--state-warning-bg); color: var(--state-warning-text); }
body.page-admin-audit-logs-view .auditDetail .severity-pill.severity-critical { background: var(--state-danger-bg); color: var(--state-danger-strong); }
body.page-admin-audit-logs-view .auditDetail .correlationLink { font-family: monospace; }

/* === /pages === */


/* === outdated-browser banner (wrapper-level — applies on every page) === */
/* extracted from includes/wrapper/footer-inc.php */
#outdated h6,
#outdated p {
	text-transform: none;
}
#outdated #btnUpdateBrowser {
	width: 260px;
}
/* === /outdated-browser banner === */




/* ============================================================
   /content-management/crud/list/?item=... — list page polish.
   ============================================================ */
.page-content-management-crud-list .card-body .filter {
	margin: 0 !important;
}
@media (min-width: 576px) {
	.page-content-management-crud-list table > thead > tr > th:last-child,
	.page-content-management-crud-list table > tbody > tr > td.actionButtons {
		width: 1%;
		white-space: nowrap;
		text-align: end;
	}
}

/* DataTables filter — tap-to-search button (grids.js initComplete); the input itself only commits on Enter/blur. */
.dataTables_filter .dt-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.25rem;
	padding: 0.25rem 0.55rem;
	line-height: 1;
	vertical-align: middle;
}


/* Staff-assignment drawer (#mySidebar): must NOT scroll itself (clips the close button at left:-29px) — scroll #sidebarContent. */
#mySidebar {
	display: flex;
	flex-direction: column;
}

/* Sidebar AJAX loader — center the spinner (base CSS sticks it left). */
#mySidebar #preloader.preloader-container {
	justify-content: center !important;
}


/* Mobile-only close button inside the sidebar. Hidden at desktop
   widths; the @media block below shows it. Positioned absolutely at
   the top-right of the panel with a clear border so it's a tappable
   visible target. */
#mySidebar .close-btn-mobile {
	display: none;
	position: absolute;
	top: 30px;             /* hug the panel top — sidebar overlays the page, no navbar to clear */
	right: 0.75rem;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border-default);
	border-radius: 0.25rem;
	background: var(--surface-page);
	color: var(--text-default);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	justify-content: center;
	align-items: center;
	z-index: 1001;
}
#mySidebar .close-btn-mobile:hover,
#mySidebar .close-btn-mobile:focus {
	background: var(--surface-sidebar-hover);
}
#mySidebar #sidebarContent {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Hide the scrollbar but keep the panel scrollable. */
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* legacy Edge / IE */
}
#mySidebar #sidebarContent::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;                /* Chrome / Safari / WebKit */
}
#mySidebar #sidebarContent .staff {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
#mySidebar #sidebarContent .staff > .card {
	margin-bottom: 0;
}
#mySidebar #sidebarContent .staff > .card > .card-body {
	padding: 0.75rem !important;
}


/* === responsive === breakpoints <768 (tablet) and <576 (phone). */

@media (max-width: 767.98px) {

	/* In-page sub-nav: no toggle button on these pages, so stack it above content as full-width scrollable pills. */
	main.wrapper:has(#sidebar) {
		flex-direction: column;
	}
	#sidebar {
		flex: 0 0 auto;
		position: static;
		min-width: 0;
		max-width: none;
		width: 100%;
		margin: 0 0 16px;
		padding: 0 0 12px;
		border-right: none;
		border-bottom: 1px solid var(--line);
	}
	#sidebar .nav {
		flex-direction: row !important;   /* override BS .flex-column */
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
	}
	#sidebar .nav-link {
		white-space: nowrap;
	}
	#sidebar .nav-link.active,
	#sidebar a.active {
		box-shadow: none;   /* the left accent bar looks wrong on horizontal pills */
	}

	/* Editor header: bump the bottom padding (matches bluecloud). */
	#editorHeader {
		padding-bottom: 10px;
	}

	/* Editor header buttons: let long labels wrap rather than overflow. */
	.editorHeaderButtons,
	.utilButtons {
		white-space: normal;
		margin-top: 0.5rem;
	}
	.editorHeaderButtons .btn,
	.utilButtons .btn {
		white-space: normal;
	}

	/* Center right-aligned action wrappers on mobile. */
	.searchButtonWrapper,
	.deleteButtonWrapper,
	.voidButtonWrapper {
		text-align: center;
	}

	/* DataTables: scroll inside the wrapper; stack the utility row so each gets its own line. */
	.dataTables_wrapper {
		overflow-x: auto;
	}
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dt-buttons,
	.dataTables_wrapper .buttonBar {
		float: none;
		text-align: center;
		margin-bottom: .5em;
	}

	/* Force the grids.js internal col-sm- grid full-width below 768 so each row gets its own line. */
	.dataTables_wrapper .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.dataTables_wrapper .row.topUtils > .col-sm-6 + .col-sm-6 {
		margin-top: 0.25rem;
	}
	.dataTables_wrapper .totalRecords,
	.dataTables_wrapper .thePager {
		text-align: center;
	}
	.dataTables_wrapper .dataTables_paginate {
		float: none;
		text-align: center;
	}

	/* DataTables search/length: stack label over a full-width control. */
	.dataTables_wrapper .dataTables_filter label,
	.dataTables_wrapper .dataTables_length label {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		align-items: stretch;
		text-align: left;
		width: 100%;
		font-weight: bold;
	}
	.dataTables_wrapper .dataTables_filter input,
	.dataTables_wrapper .dataTables_length select {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
	.dataTables_wrapper .dataTables_filter .dt-search-trigger {
		display: inline-flex;
		align-self: flex-end;
		margin-left: 0;
	}

	/* Cap input groups / form controls at the viewport so fixed widths don't overflow. */
	main .input-group,
	main .form-control,
	main .custom-select,
	.modal-body .form-control,
	.modal-body .custom-select {
		max-width: 100%;
	}

	/* Standalone search / quick-jump form — full-width input on mobile. */
	.quickSearchForm,
	.quickSearchForm input,
	#idSearchForm,
	#idSearchForm input {
		width: 100%;
		max-width: 100%;
	}

	/* Cap fixed-pixel-width fields at the viewport. */
	body.page-content-management .width-200,
	body.page-content-management-bingo .width-200,
	body.page-classification .width-200 {
		max-width: 100%;
	}

	/* Default-positions sidebar list: free up the staff list on tablet. */
	body.page-events-default-positions-editor .staff {
		max-height: 50vh;
	}

	/* /events/ filter — stack on phones via flex order: Circuit on row 1, [←] Month Year [→] on row 2 (targeted by nth-child). */
	body.page-events #monthNav {
		font-size: 1rem;
	}
	body.page-events #monthNav .form-group {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
	}
	/* Circuit (2nd child) — full width, first row */
	body.page-events #monthNav .form-group > :nth-child(2) {
		order: 0;
		flex: 0 0 100%;
		max-width: 100%;
		min-width: 0;
	}
	/* ← arrow (1st child) — left side of row 2 */
	body.page-events #monthNav .form-group > :nth-child(1) {
		order: 1;
		flex: 0 0 auto;
	}
	/* Month (3rd) and Year (4th) selects — share row 2 */
	body.page-events #monthNav .form-group > :nth-child(3),
	body.page-events #monthNav .form-group > :nth-child(4) {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		max-width: 100%;
	}
	/* → arrow (5th child) — right side of row 2 */
	body.page-events #monthNav .form-group > :nth-child(5) {
		order: 3;
		flex: 0 0 auto;
	}
	/* Make any direct-child <select> fill its flex track. */
	body.page-events #monthNav .form-group > select.form-control,
	body.page-events #monthNav .form-group > .ts-wrapper,
	body.page-events #monthNav .form-group > .bootstrap-select {
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
	}
	/* Prev/Next arrows: square tappable buttons */
	body.page-events #monthNav .form-group > a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.25rem;
		border: 1px solid var(--border-default);
		border-radius: var(--radius-default);
		color: var(--text-default);
		background: var(--surface-page);
		text-decoration: none;
	}

	/* Staff drawer (#mySidebar): JS sets inline width:650px — override to full width on phones. */
	#mySidebar {
		max-width: 100vw;
	}
	#mySidebar[style*="width: 650px"],
	#mySidebar[style*="width:650px"] {
		width: 100vw !important;
	}
	#mySidebar #sidebarContent.container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		padding-bottom: 1.5rem;
	}

	/* Hide the offscreen desktop close button; show the mobile one only when the drawer is open (keyed off inline width). */
	#mySidebar .close-btn {
		display: none !important;
	}
	#mySidebar[style*="width: 650px"] .close-btn-mobile,
	#mySidebar[style*="width:650px"] .close-btn-mobile {
		display: flex !important;
	}
	/* Free the staff list from the 50vh cap on phones so it scrolls inside #mySidebar. */
	#mySidebar #sidebarContent .staff {
		max-height: none;
		gap: 0.75rem;
	}
	/* Fallback margin for browsers that ignore flex `gap` on block-level cards. */
	#mySidebar #sidebarContent .staff > .card {
		margin-bottom: 0;
	}
	#mySidebar #sidebarContent .staff > .card + .card {
		margin-top: 0;
	}
	/* Tighten internal padding so each card breathes inside the narrow
	   drawer width without the avatar/name section feeling cramped. */
	#mySidebar #sidebarContent .staff > .card > .card-body {
		padding: 0.75rem !important;
	}

	/* Staff sidebar header row (search input + sort button): the search
	   input-group and sort button live in a single .d-flex with
	   justify-content-between. On phones they crowd; let them wrap. */
	#mySidebar #sidebarContent .row.mb-3 > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	#mySidebar #sidebarContent .row.mb-3 .d-flex.justify-content-between {
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: stretch !important;
	}
	#mySidebar #sidebarContent .row.mb-3 .input-group {
		flex: 1 1 100%;
	}

	/* Staff person cards: at <768 the col-md-6 halves stack full-width.
	   The right half uses justify-content:end + align-items:end which
	   looks awkward when stacked — flip to start alignment. */
	#mySidebar #sidebarContent .staff .card .row > [class*="col-md-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	#mySidebar #sidebarContent .staff .card .col-md-6.justify-content-end.align-items-end {
		justify-content: flex-start !important;
		align-items: flex-start !important;
		margin-top: 0.5rem;
	}

	/* Lock #mainHeader visible on mobile — cloud.js's scroll fade strobes the navbar on tiny wobbles. */
	#mainHeader {
		display: block !important;
		opacity: 1 !important;
	}

	/* Cancel the editor header's .floating (fixed) state on mobile — it caused page-height flicker. */
	#editorHeader.floating {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		background: transparent !important;
		box-shadow: none !important;
		z-index: auto !important;
	}

	/* === Responsive cards (opt-in via class="responsive-cards") === each <td> shows "Label: Value" via data-label set by applyResponsiveCardLabels() in grids.js. */

	/* Hide the header visually but keep it readable to assistive tech. */
	table.responsive-cards > thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Some tables put inline <th> rows inside <tbody>. Hide those too. */
	table.responsive-cards > tbody > tr:has(> th) {
		display: none;
	}

	table.responsive-cards > tbody > tr {
		display: block;
		margin-bottom: 0.75rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-default);
		padding: 0.5rem 0.75rem;
		background: var(--surface-page);
	}
	/* JS template / empty-state rows stay hidden in cards mode. */
	table.responsive-cards > tbody > tr.cloneSource {
		display: none !important;
	}
	table.responsive-cards > tbody > tr:nth-of-type(odd) {
		background: var(--surface-alt-row);
	}

	table.responsive-cards > tbody > tr > td {
		/* !important defeats the Responsive plugin's inline display:none so every field shows in card mode. */
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		padding: 0.35rem 0;
		border: none;
		text-align: right;
		word-break: break-word;
	}
	table.responsive-cards > tbody > tr > td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--text-form);
		margin-right: 0.75rem;
		flex: 0 0 40%;
		text-align: left;
	}

	/* Dark mode: repaint card chrome + labels from themed tokens (base rules use light-only tokens). */
	[data-theme="dark"] table.responsive-cards > tbody > tr {
		background: var(--surface);
		border-color: var(--line);
	}
	[data-theme="dark"] table.responsive-cards > tbody > tr:nth-of-type(odd) {
		background: var(--surface-2);
	}
	[data-theme="dark"] table.responsive-cards > tbody > tr > td::before {
		color: var(--ink-mute);
	}

	/* Hide the control / expand-arrow column in card mode (every column is already shown). */
	table.responsive-cards > tbody > tr > td.dtr-control,
	table.responsive-cards > tbody > tr > td.control {
		display: none !important;
	}

	/* Hide FixedHeader's cloned thead in card mode — it becomes a stray strip under the navbar. */
	.fixedHeader-floating,
	.fixedHeader-locked {
		display: none !important;
	}

	/* responsive-cards-form variant: editable rows, label above a full-width control. */
	table.responsive-cards.responsive-cards-form > tbody > tr > td {
		flex-direction: column !important;
		align-items: stretch;
		justify-content: flex-start;
		text-align: left;
		gap: 0.25rem;
	}
	table.responsive-cards.responsive-cards-form > tbody > tr > td::before {
		flex: 0 0 auto;
		margin-right: 0;
		font-size: 0.85rem;
	}
	table.responsive-cards.responsive-cards-form > tbody > tr > td .form-control,
	table.responsive-cards.responsive-cards-form > tbody > tr > td .form-control-sm,
	table.responsive-cards.responsive-cards-form > tbody > tr > td .input-group,
	table.responsive-cards.responsive-cards-form > tbody > tr > td textarea,
	table.responsive-cards.responsive-cards-form > tbody > tr > td select {
		width: 100%;
		max-width: 100%;
	}
	/* Two adjacent <select>s for hour/minute on the same line stay paired. */
	table.responsive-cards.responsive-cards-form > tbody > tr > td .form-group {
		display: flex;
		gap: 0.25rem;
		width: 100%;
		margin: 0;
	}
	/* Action <td> with the delete button — drop the label, button only. */
	table.responsive-cards.responsive-cards-form > tbody > tr > td:last-child::before {
		display: none;
	}
	table.responsive-cards.responsive-cards-form > tbody > tr > td:last-child .goAwayButton {
		align-self: flex-end;
	}

	/* "No records" row: center it, drop the label pseudo. */
	table.responsive-cards > tbody > tr > td.dataTables_empty {
		display: block !important;
		text-align: center;
		color: var(--text-muted-bs);
		padding: 0.75rem 0;
	}
	table.responsive-cards > tbody > tr > td.dataTables_empty::before {
		display: none;
	}

	/* Multi-column cells (loaders, empty-states): own row, no label prefix. */
	table.responsive-cards > tbody > tr > td[colspan] {
		display: block !important;
		text-align: center;
		padding: 0.5rem 0;
	}
	table.responsive-cards > tbody > tr > td[colspan]::before {
		display: none;
	}

	/* RowReorder gripper: full-width drag handle above the labelled rows. */
	table.responsive-cards > tbody > tr > td.gripper {
		justify-content: center;
		border-bottom: 1px solid #f1f3f5;
		margin-bottom: 0.25rem;
		padding: 0.5rem 0;
		font-size: 1.25rem;
		color: var(--text-muted-bs);
		cursor: grab;
	}
	table.responsive-cards > tbody > tr > td.gripper::before {
		display: none;
	}

	/* Checkbox cells: center the box, no label prefix. */
	table.responsive-cards > tbody > tr > td.checker {
		justify-content: center;
	}
	table.responsive-cards > tbody > tr > td.checker::before {
		display: none;
	}

	/* DataTables `processing` indicator: in-flow banner + spinner on small screens. */
	.dataTables_wrapper .dataTables_processing {
		display: none !important;
		margin: 0 !important;
	}
	.dataTables_wrapper .dataTables_processing[style*="display: block"] {
		display: block !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		margin: 1rem 0 !important;
		padding: 1.25rem 1rem !important;
		background: var(--surface-alt-row) !important;
		border: 1px solid var(--border-soft) !important;
		border-radius: var(--radius-default) !important;
		text-align: center !important;
		color: var(--text-muted-bs) !important;
		font-size: 1rem !important;
		font-weight: 500 !important;
		width: 100% !important;
		height: auto !important;
		box-shadow: none !important;
		line-height: 1.5 !important;
		opacity: 1 !important;
	}
	.dataTables_wrapper .dataTables_processing[style*="display: block"]::before {
		content: "";
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		margin-right: 0.6rem;
		border: 2.5px solid var(--border-soft);
		border-top-color: #007bff;
		border-radius: 50%;
		animation: womp-cards-spin 0.8s linear infinite;
		vertical-align: -0.3rem;
	}

	/* OVERRIDE: in a .data-list-auto.view-table shell the user picked Table view — restore normal table rendering. */
	.data-list.data-list-auto.view-table table.responsive-cards > thead {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
	.data-list.data-list-auto.view-table table.responsive-cards > tbody > tr {
		display: table-row;
		margin: 0;
		border: 0;
		padding: 0;
		background: transparent;
	}
	.data-list.data-list-auto.view-table table.responsive-cards > tbody > tr > td {
		display: table-cell !important;
		text-align: left;
		justify-content: initial;
		align-items: initial;
		padding: 6px 10px;
	}
	.data-list.data-list-auto.view-table table.responsive-cards > tbody > tr > td::before {
		content: none;
	}
}

@keyframes womp-cards-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {

	/* Phone-only adjustments. */

	/* CRUD list action cell in card mode: stop the "Actions" label breaking mid-word. */
	body.page-content-management-crud-list table.responsive-cards > tbody > tr > td.actionButtons::before {
		white-space: nowrap;
	}

	/* Editor header — stack title over a full-width button block on phone (column-reverse puts Save above Cancel). */
	#editorHeader > .col,
	#editorHeader > [class^="col-"],
	#editorHeader > [class*=" col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.editorHeaderButtons,
	.utilButtons {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.25rem;
		margin-top: 0.5rem;
	}
	.editorHeaderButtons .btn,
	.editorHeaderButtons .btn-group,
	.utilButtons .btn,
	.utilButtons .btn-group {
		width: 100%;
		margin: 0;
	}

	/* Events editor — 4 buttons (View / Clone / Cancel / Save) feel
	   heavy stacked. Arrange as:
	     [        Save        ]
	     [       Cancel       ]
	     [  Clone  ][  View   ]
	   Save + Cancel keep prominence; the auxiliary actions share row 3. */
	/* /reports/wba-registration-timeline/ — 5-cell filter row (Event,
	   Reg From, Reg To, Unit Name, Search/Clear). Each col-sm-*
	   shrinks to 25-33% at xs which is unusable. Stack full-width.
	   Search + Clear buttons share row 2 of their cell as a 50/50
	   pair. Stats card row + Export button also stack. */
	body.page-reports-wba-registration-timeline #myForm > .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}
	body.page-reports-wba-registration-timeline #myForm .input-group,
	body.page-reports-wba-registration-timeline #myForm .form-control,
	body.page-reports-wba-registration-timeline #myForm .datetimepicker-input {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.page-reports-wba-registration-timeline #myForm .form-group > label[for=""],
	body.page-reports-wba-registration-timeline #myForm .form-group > label:empty {
		display: none;
	}
	/* Search/Clear cell: strip the spacer <br>/label and lay the buttons out as a 50/50 flex pair. */
	body.page-reports-wba-registration-timeline #myForm .col-sm-2:not(.col) .form-group {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		align-items: stretch;
	}
	body.page-reports-wba-registration-timeline #myForm .col-sm-2:not(.col) .form-group > br,
	body.page-reports-wba-registration-timeline #myForm .col-sm-2:not(.col) .form-group > label {
		display: none;
	}
	body.page-reports-wba-registration-timeline #myForm #searchButton,
	body.page-reports-wba-registration-timeline #myForm #clearButton {
		flex: 1 1 calc(50% - 0.25rem);
		margin: 0;
		min-width: 0;
	}
	/* Stats cards row + Export button: stack each on its own line. */
	body.page-reports-wba-registration-timeline .row.mb-3 > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}
	body.page-reports-wba-registration-timeline .row.mb-3 .float-right {
		float: none !important;
		margin-top: 0 !important;
	}
	body.page-reports-wba-registration-timeline .row.mb-3 .float-right > .btn {
		width: 100%;
	}

	/* /reports/westernbands-reg/ — stack the year select under the h2 title; stretch the Export button. */
	body.page-reports-westernbands-reg #editorHeader h2 {
		font-size: 1.25rem;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	body.page-reports-westernbands-reg #editorHeader h2 form,
	body.page-reports-westernbands-reg #editorHeader h2 select {
		width: 100%;
	}
	body.page-reports-westernbands-reg main .float-right {
		float: none !important;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 0.5rem;
	}
	body.page-reports-westernbands-reg main .float-right > .btn {
		width: 100%;
		margin: 0;
	}

	/* /reports/usbands-reg/ — stack the inline header (title + year select + datepicker) full-width on phones. */
	body.page-reports-usbands-reg #editorHeader > .col.d-flex {
		flex-direction: column;
		align-items: stretch !important;
		gap: 0.5rem !important;
	}
	body.page-reports-usbands-reg #editorHeader h2 {
		font-size: 1.25rem;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	body.page-reports-usbands-reg #editorHeader h2 form,
	body.page-reports-usbands-reg #editorHeader h2 select {
		width: 100%;
	}
	body.page-reports-usbands-reg #editorHeader .form-group {
		flex-direction: column;
		align-items: stretch !important;
		gap: 0.25rem !important;
		width: 100%;
	}
	body.page-reports-usbands-reg #editorHeader .input-group,
	body.page-reports-usbands-reg #editorHeader .datetimepicker-input {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Reset / Export action row: full-width stacked instead of float-right cluster. */
	body.page-reports-usbands-reg main .float-right {
		float: none !important;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 0.5rem;
	}
	body.page-reports-usbands-reg main .float-right > .btn {
		width: 100%;
		margin: 0;
	}

	/* /people/editor.php — Available Dates tab: hide the thead, stack each row's toggle + select full-width. */
	body.page-people-editor .available-dates-table thead {
		display: none;
	}
	body.page-people-editor .available-dates-table tr {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--border-soft);
	}
	body.page-people-editor .available-dates-table td {
		display: block;
		width: 100% !important;
		border: none;
		padding: 0;
	}
	body.page-people-editor .available-dates-table td .col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0;
	}
	/* Keep the toggle's natural width — it computes label widths inline at init, so forcing 100% would hide the date text. */
	body.page-people-editor .available-dates-table .toggle.btn {
		width: 220px !important;
	}
	body.page-people-editor .available-dates-table .toogleAvailableDate + .toggle-group .toggle-on,
	body.page-people-editor .available-dates-table .toogleAvailableDate + .toggle-group .toggle-off {
		font-size: 0.85rem;
		white-space: nowrap;
	}
	body.page-people-editor .available-dates-table .form-control {
		width: 100%;
	}

	/* /people/editor.php — Expense Levels tab: stack each row's label over its select so long labels aren't squashed. */
	body.page-people-editor .expense-level-table tr {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--border-soft);
	}
	body.page-people-editor .expense-level-table td {
		display: block;
		width: 100% !important;
		border: none;
		padding: 0;
	}
	body.page-people-editor .expense-level-table .form-control {
		width: 100%;
	}

	/* /units/editor.php — stack the two bare .col form columns full-width on phones (BS keeps them 50/50 otherwise). */
	body.page-units-editor #myForm > .row > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* /units/productions/editor.php — full-width each Repeater .col on mobile (row-cols-sm-2 keeps them 50/50). */
	body.page-units-productions-editor .row.row-cols-sm-2 > .col,
	body.page-units-productions-editor .row[class*="row-cols-"] > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}
	/* Section header (h1) + Cancel/Save row — stack vertically with full-width buttons on phones. */
	body.page-units-productions-editor #editorHeader {
		row-gap: 0.75rem;
	}
	body.page-units-productions-editor #editorHeader > .col-8,
	body.page-units-productions-editor #editorHeader > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}
	body.page-units-productions-editor #editorHeader .editorHeaderButtons {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		flex-wrap: wrap;
		text-align: left;
	}
	body.page-units-productions-editor #editorHeader .editorHeaderButtons > .btn {
		flex: 1 1 0;
		min-height: 40px;
		margin: 0;
	}
	/* Repeater action-row (col-6 label / col-6 button): stack the label above a full-width button row on phones. */
	body.page-units-productions-editor h2 + .row > .col-6,
	body.page-units-productions-editor .unitProductionPeople ~ * .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
		text-align: left !important;
	}
	body.page-units-productions-editor .text-right {
		text-align: left !important;
	}
}

/* /units/productions/editor.php — tablet (576-991px): stack the col-sm-6 form columns and editorHeader full-width. */
@media (min-width: 576px) and (max-width: 991.98px) {
	body.page-units-productions-editor #myForm > .row > .col-sm-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	/* Nested col-sm-6 rows (e.g. circuit + season) also stack at tablet. */
	body.page-units-productions-editor #myForm .col-sm-6 > .row > .col-sm-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	body.page-units-productions-editor #editorHeader > .col-8,
	body.page-units-productions-editor #editorHeader > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* /units/editor.php — section headers (float-start h2 + float-end actions) collide on phones; stack them. */
	body.page-units-editor h2.float-start,
	body.page-units-editor h2.float-left {
		float: none !important;
		display: block;
		width: 100%;
		font-size: 1.25rem;
		margin: 0 0 0.5rem;
	}
	body.page-units-editor .float-end,
	body.page-units-editor .float-right {
		float: none !important;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin: 0 0 0.75rem 0;
	}
	body.page-units-editor .float-end > .btn,
	body.page-units-editor .float-end > .btn-group,
	body.page-units-editor .float-end > a.btn,
	body.page-units-editor .float-end > .form-group,
	body.page-units-editor .float-right > .btn,
	body.page-units-editor .float-right > .btn-group,
	body.page-units-editor .float-right > a.btn,
	body.page-units-editor .float-right > .form-group {
		width: 100%;
		margin: 0;
	}
	/* #editorHeader: stack the title over full-width action buttons. */
	body.page-units-editor #editorHeader {
		row-gap: 0.75rem;
	}
	body.page-units-editor #editorHeader > .col.editorHeaderButtons {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		flex-wrap: wrap;
		text-align: left;
	}
	body.page-units-editor #editorHeader .editorHeaderButtons > .btn {
		flex: 1 1 0;
		min-height: 40px;
		margin: 0;
	}

	/* Editor title h1 — slim breadcrumb on phones with the ID badge inline. */
	body.page-units-editor #editorHeader h1 {
		font-size: 1.25rem;
		margin: 0 0 0.5rem;
		line-height: 1.3;
	}
	body.page-units-editor #editorHeader h1 .infoBlock {
		display: inline-flex;
		gap: 0.25rem;
		margin-left: 0.25rem;
		vertical-align: baseline;
	}
	body.page-units-editor #editorHeader h1 .infoBlock .infoTitle,
	body.page-units-editor #editorHeader h1 .infoBlock .info {
		display: inline;
		font-size: 0.7rem;
	}

	/* /administration-contact-emails/editor.php — stack the three col-4 cells full-width on mobile. */
	body.page-administration-contact-emails-editor #myForm > .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}
	body.page-administration-contact-emails-editor #myForm .form-control {
		width: 100%;
		max-width: 100%;
	}
	body.page-administration-contact-emails-editor #myForm .form-group > br {
		display: none;
	}

	/* /admin/audit-logs/view.php — stack filters full-width, scroll the domain-tab strip, 50/50 Apply/Clear. */
	body.page-admin-audit-logs-view #editorHeader h2 {
		font-size: 1.25rem;
		margin: 0 0 0.5rem;
	}
	body.page-admin-audit-logs-view ul.auditTabs.nav-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		border-bottom: 1px solid var(--border-soft);
	}
	body.page-admin-audit-logs-view ul.auditTabs.nav-tabs::-webkit-scrollbar {
		height: 4px;
	}
	body.page-admin-audit-logs-view ul.auditTabs.nav-tabs::-webkit-scrollbar-thumb {
		background: var(--border-default);
		border-radius: 2px;
	}
	body.page-admin-audit-logs-view ul.auditTabs.nav-tabs > .nav-item {
		flex: 0 0 auto;
	}
	body.page-admin-audit-logs-view ul.auditTabs.nav-tabs .nav-link {
		white-space: nowrap;
		padding: 0.5rem 0.875rem;
		font-size: 0.9rem;
	}
	body.page-admin-audit-logs-view #filterForm > .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}
	body.page-admin-audit-logs-view #filterForm .input-group,
	body.page-admin-audit-logs-view #filterForm .form-control,
	body.page-admin-audit-logs-view #filterForm .datetimepicker-input {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.page-admin-audit-logs-view #filterForm .form-group > label[for=""],
	body.page-admin-audit-logs-view #filterForm .form-group > label:empty {
		display: none;
	}
	/* Apply / Clear pair — sit side by side as 50/50 */
	body.page-admin-audit-logs-view #filterForm .form-group:has(button[type="submit"]),
	body.page-admin-audit-logs-view #filterForm .col-sm-2:last-child .form-group {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	body.page-admin-audit-logs-view #filterForm .form-group > br,
	body.page-admin-audit-logs-view #filterForm .form-group > label[for=""] {
		display: none;
	}
	body.page-admin-audit-logs-view #filterForm button[type="submit"],
	body.page-admin-audit-logs-view #filterForm a.btn {
		flex: 1 1 calc(50% - 0.25rem);
		min-width: 0;
		margin: 0;
	}
	/* Audit grid cards: overflow-wrap:anywhere + min-width:0 so long UUIDs/URIs/JSON don't push the card past the viewport. */
	body.page-admin-audit-logs-view #grid_wrapper,
	body.page-admin-audit-logs-view table.responsive-cards {
		max-width: 100%;
	}
	body.page-admin-audit-logs-view table.responsive-cards > tbody > tr > td {
		flex-wrap: wrap;
		text-align: left;
		row-gap: 0.25rem;
		min-width: 0;
	}
	body.page-admin-audit-logs-view table.responsive-cards > tbody > tr > td,
	body.page-admin-audit-logs-view table.responsive-cards > tbody > tr > td * {
		overflow-wrap: anywhere;
		word-break: break-word;
		min-width: 0;
	}
	body.page-admin-audit-logs-view table.responsive-cards .auditTargetSummary {
		display: block;
		width: 100%;
		margin-top: 0.25rem;
	}

	/* All /reports/* pages — generic mobile rules (shared shape: h2 title, #myForm filter cells, .float-right actions, DataTable). */
	body[class*="page-reports-"] #editorHeader h2 {
		font-size: 1.25rem;
		margin: 0 0 0.5rem;
	}
	body[class*="page-reports-"] #myForm > .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}
	body[class*="page-reports-"] #myForm .input-group,
	body[class*="page-reports-"] #myForm .form-control,
	body[class*="page-reports-"] #myForm .datetimepicker-input {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Collapse empty placeholder labels (desktop alignment spacers) on mobile. */
	body[class*="page-reports-"] #myForm .form-group > label[for=""],
	body[class*="page-reports-"] #myForm .form-group > label:empty {
		display: none;
	}
	/* .float-right action clusters become a stacked full-width column. */
	body[class*="page-reports-"] main .float-right {
		float: none !important;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin: 0 0 0.5rem 0 !important;
	}
	body[class*="page-reports-"] main .float-right > .btn {
		width: 100%;
		margin: 0;
	}
	/* Tables without responsive-cards just shrink + scroll inside their col. */
	body[class*="page-reports-"] main .table:not(.responsive-cards) {
		font-size: 0.85rem;
	}

	/* /reports/membership/ — slim the title on phones. */
	body.page-reports-membership #editorHeader h2 {
		font-size: 1.25rem;
		margin: 0 0 0.5rem;
	}

	/* /reports/payments/ — stack the col-sm-3 filter cells full-width on phones; stretch the Search button. */
	body.page-reports-payments #myForm > .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}
	body.page-reports-payments #myForm .input-group,
	body.page-reports-payments #myForm .form-control,
	body.page-reports-payments #myForm .datetimepicker-input {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.page-reports-payments #myForm .searchButton {
		display: block;
		width: 100%;
	}
	/* Collapse the empty spacer label above the Search button on mobile. */
	body.page-reports-payments #myForm .form-group > label[for=""],
	body.page-reports-payments #myForm .form-group > label:empty {
		display: none;
	}

	/* /reports/dashboard/ — stack the h2 title and its inline year/circuit selects on phones. */
	body.page-reports-dashboard #editorHeader h2 {
		font-size: 1.25rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
	}
	body.page-reports-dashboard #editorHeader h2 form {
		display: flex !important;
		flex-direction: column;
		gap: 0.5rem;
		width: 100%;
	}
	body.page-reports-dashboard #editorHeader h2 form select,
	body.page-reports-dashboard #editorHeader h2 form select.form-control {
		width: 100%;
		max-width: 100%;
	}
	/* Tighten the 40px inter-card margin to 1rem on phones. */
	body.page-reports-dashboard main .row[style*="margin-top: 40px"] {
		margin-top: 1rem !important;
	}
	body.page-reports-dashboard .card-header h5 {
		font-size: 1rem;
		margin: 0;
	}
	/* Wide tables render as responsive cards on phones — card-body just keeps tight padding. */
	body.page-reports-dashboard .card-body {
		padding: 0.75rem;
	}
	body.page-reports-dashboard .card-body table {
		font-size: 0.9rem;
		margin-bottom: 0;
	}

	/* /scheduling/expenses/ — header/filter bar: stack each col-sm-* full-width on phones (inline gap + floats break otherwise). */
	body.page-scheduling-expenses #editorHeader {
		flex-direction: column;
		align-items: stretch !important;
		gap: 0.5rem;
	}
	body.page-scheduling-expenses #editorHeader > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	body.page-scheduling-expenses #editorHeader h1 {
		font-size: 1.5rem;
		margin: 0;
	}
	body.page-scheduling-expenses #editorHeader .form-group {
		flex-direction: column;
		gap: 0.5rem;
	}
	body.page-scheduling-expenses #editorHeader #entryForCircuit {
		width: 100%;
	}
	body.page-scheduling-expenses #editorHeader .openSettings,
	body.page-scheduling-expenses #editorHeader .exportPDF,
	body.page-scheduling-expenses #editorHeader .btn-group {
		width: 100%;
		margin: 0 !important;
	}
	body.page-scheduling-expenses #editorHeader .btn-group > .btn {
		width: 100%;
	}
	/* Filter funnel block: collapse the inline gap, full width */
	body.page-scheduling-expenses #filter-block {
		gap: 0.5rem !important;
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-start !important;
	}
	body.page-scheduling-expenses #filter-block #filters-trigger {
		width: 100%;
	}
	body.page-scheduling-expenses .filter-dropdown {
		position: static !important;
		width: 100% !important;
	}
	/* Filter-dropdown: stack the Event Dates date pair (each full-width) with the separator on its own line. */
	body.page-scheduling-expenses .filter-dropdown .form-date {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}
	body.page-scheduling-expenses .filter-dropdown .form-date input[type="date"] {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.page-scheduling-expenses .filter-dropdown .form-date > span {
		text-align: center;
		font-size: 0.85rem;
		color: var(--text-muted);
	}
	body.page-scheduling-expenses .filter-dropdown #eventChooser {
		width: 100%;
	}
	/* Tighten checkbox group spacing so the panel doesn't feel huge. */
	body.page-scheduling-expenses .filter-dropdown .form-check {
		padding-left: 0;
	}

	/* /scheduling/expenses/ — card mode: shrink the oversized .addExpense / .expenseAction font so cells fit. */
	body.page-scheduling-expenses td.addExpense {
		font-size: 1.25rem !important;
		text-decoration: underline;
		line-height: 1.2;
	}
	body.page-scheduling-expenses td.expenseAction {
		font-size: 0.95rem !important;
		font-weight: 600;
	}
	/* In the cards mode, give the value column more breathing room
	   (50/50 instead of 40/60) and let it wrap naturally, not right-
	   aligned forced wrap that ends up vertical-letter for narrow
	   nested elements. */
	body.page-scheduling-expenses table.responsive-cards > tbody > tr > td {
		flex-wrap: wrap;
		row-gap: 0.25rem;
		text-align: left;
	}
	body.page-scheduling-expenses table.responsive-cards > tbody > tr > td::before {
		flex: 0 0 auto;
		min-width: 35%;
	}
	/* Action button group inside Approve/Deny cell — keep them
	   horizontal, not vertical-letter stacked. */
	body.page-scheduling-expenses td.expenseAction .btn-group,
	body.page-scheduling-expenses td.expenseAction .btn {
		display: inline-flex !important;
		flex: 0 0 auto;
		writing-mode: horizontal-tb !important;
	}

	/* Repeater "new item" button row — used by classification/editor,
	   units/productions/editor, scheduling/expenses modals, and any
	   other page that renders the col-6 (empty header label) +
	   col-6 (right-aligned .newProductionPersonButton) pattern. At
	   narrow widths the button wraps mid-word inside its 50% column;
	   stretch the button and hide the empty-header sibling column. */
	.newProductionPersonButton {
		width: 100%;
		white-space: normal;
		padding: 0.5rem 0.75rem;
		font-size: 0.9rem;
	}
	.row:has(> .col-6 > .newProductionPersonButton) > .col-6:first-child,
	.row:has(> .col-6 > .text-right > .newProductionPersonButton) > .col-6:first-child {
		display: none;
	}
	.row:has(> .col-6 > .newProductionPersonButton) > .col-6:last-child,
	.row:has(> .col-6 > .text-right > .newProductionPersonButton) > .col-6:last-child {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.row > .col-6 > .text-right:has(> .newProductionPersonButton) {
		text-align: stretch !important;
	}

	/* Clamp Bootstrap-Select's plugin min-width to the viewport so the menu doesn't overflow the right edge. */
	.bootstrap-select .dropdown-menu {
		max-width: calc(100vw - 1rem);
		min-width: 0 !important;
	}
	.bootstrap-select .dropdown-menu li {
		max-width: 100%;
	}
	.bootstrap-select .dropdown-menu li a {
		white-space: normal;
		word-break: break-word;
	}

	/* Generic .dropdown-menu clamp lives in the global rule below (menus overflow at tablet/desktop too). */

	/* States Select2 on /classification/editor.php: force full-width on mobile (inline width:350px otherwise overflows). */
	body.page-classification-editor #selectState,
	body.page-classification-editor .select2-container,
	body.page-classification-editor .select2-selection,
	body.page-classification-editor .select2-selection__rendered {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* /content-management/crud/list/?item=... — filters live in the search card above; table keeps default responsive behavior. */

	/* Pagination wraps & centers on phones. */
	body.page-content-management-crud-list .pagination {
		flex-wrap: wrap;
		gap: 0.25rem;
		justify-content: center;
		padding-left: 0;
	}
	body.page-content-management-crud-list .pagination .page-link {
		padding: 0.3rem 0.55rem;
		font-size: 0.85rem;
	}

	/* Events editor per-tab header: stack the float-left h2 above a full-width float-right action group on phones. */
	body.page-events-editor .tab-pane h2.float-left {
		float: none !important;
		display: block;
		width: 100%;
		font-size: calc(20px * var(--fs-scale, 1));
		margin: 0 0 0.5rem;
	}
	body.page-events-editor .tab-pane .actions.float-right {
		float: none !important;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		margin: 0 0 0.75rem;
	}
	body.page-events-editor .tab-pane .actions.float-right > .btn,
	body.page-events-editor .tab-pane .actions.float-right > .btn-group,
	body.page-events-editor .tab-pane .actions.float-right > .form-group {
		float: none !important;
		width: 100%;
		margin: 0 !important;
	}
	body.page-events-editor .tab-pane .actions.float-right .btn-group > .btn,
	body.page-events-editor .tab-pane .actions.float-right .btn-group > .dropdown-toggle {
		width: 100%;
	}
	/* Center the toggle switches when stacked full-width. */
	body.page-events-editor .tab-pane .actions.float-right .switch-toggle,
	body.page-events-editor .tab-pane .actions.float-right fieldset {
		width: 100%;
	}

	/* BS5 .float-end action rows: replace the float with a stacked full-width column on phones. */
	body.page-events-editor .tab-pane .float-end,
	body.page-events-editor .tab-pane .float-right {
		float: none !important;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		margin: 0 0 0.75rem;
	}
	body.page-events-editor .tab-pane .float-end > .btn,
	body.page-events-editor .tab-pane .float-end > .btn-group,
	body.page-events-editor .tab-pane .float-end > a,
	body.page-events-editor .tab-pane .float-end > button,
	body.page-events-editor .tab-pane .float-right > .btn,
	body.page-events-editor .tab-pane .float-right > .btn-group,
	body.page-events-editor .tab-pane .float-right > a,
	body.page-events-editor .tab-pane .float-right > button {
		float: none !important;
		width: 100%;
		margin: 0 !important;
		text-align: center;
	}
	body.page-events-editor .tab-pane .float-end > .btn-group > .btn,
	body.page-events-editor .tab-pane .float-end > .btn-group > .dropdown-toggle,
	body.page-events-editor .tab-pane .float-right > .btn-group > .btn,
	body.page-events-editor .tab-pane .float-right > .btn-group > .dropdown-toggle {
		width: 100%;
	}
	/* Restore a border on stacked ghost .btn-outline-secondary buttons so they read as buttons. */
	body.page-events-editor .tab-pane .float-end > .btn-outline-secondary,
	body.page-events-editor .tab-pane .float-end > a.btn-outline-secondary,
	body.page-events-editor .tab-pane .float-right > .btn-outline-secondary,
	body.page-events-editor .tab-pane .float-right > a.btn-outline-secondary {
		border-color: var(--line) !important;
		background: var(--surface);
		color: var(--ink);
	}

	/* Tab bars (events/people editor): horizontal scroll instead of flex-wrap so long labels don't fragment into ragged rows. */
	body.page-events-editor #nav-tab.nav-tabs,
	body.page-people-editor #nav-tab.nav-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		border-bottom: 1px solid var(--border-soft);
	}
	body.page-events-editor #nav-tab.nav-tabs::-webkit-scrollbar,
	body.page-people-editor #nav-tab.nav-tabs::-webkit-scrollbar {
		height: 4px;
	}
	body.page-events-editor #nav-tab.nav-tabs::-webkit-scrollbar-thumb,
	body.page-people-editor #nav-tab.nav-tabs::-webkit-scrollbar-thumb {
		background: var(--border-default);
		border-radius: 2px;
	}
	body.page-events-editor #nav-tab.nav-tabs > .nav-link,
	body.page-people-editor #nav-tab.nav-tabs > .nav-link {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 0.5rem 0.875rem;
		font-size: calc(14.4px * var(--fs-scale, 1));
	}
	body.page-events-editor #nav-tab.nav-tabs > .nav-link.active,
	body.page-people-editor #nav-tab.nav-tabs > .nav-link.active {
		font-weight: 600;
	}

	/* Events editor sticky header — on phones, stack title over a compact button row. */
	body.page-events-editor #editorHeader {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		margin: -16px -16px 16px !important;
		padding: 12px 16px 12px !important;
	}
	body.page-events-editor #editorHeader > .col:first-child {
		order: 1;
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	body.page-events-editor #editorHeader > .col.editorHeaderButtons {
		order: 2;
		flex: 0 0 auto !important;
		width: 100% !important;
		margin-left: 0 !important;
	}
	body.page-events-editor #editorHeader h1 {
		font-size: calc(13px * var(--fs-scale, 1));
		margin: 0;
		line-height: 1.25;
	}
	body.page-events-editor #editorHeader h1 .title {
		display: inline;
	}
	body.page-events-editor #editorHeader h1 .infoBlock {
		display: inline-flex;
		gap: 4px;
		margin-left: 6px;
		vertical-align: baseline;
		padding: 1px 6px;
	}
	body.page-events-editor #editorHeader h1 .infoBlock .infoTitle,
	body.page-events-editor #editorHeader h1 .infoBlock .info {
		display: inline;
		font-size: calc(9.5px * var(--fs-scale, 1));
	}
	body.page-events-editor #editorHeader h1 b {
		display: block;
		font-size: calc(18px * var(--fs-scale, 1)) !important;
		margin: 4px 0 0 0 !important;
		line-height: 1.2;
	}

	/* Button row: View + Clone on top, Cancel + Save below, each 50/50. */
	body.page-events-editor .editorHeaderButtons {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		justify-content: stretch !important;
	}
	body.page-events-editor .editorHeaderButtons .cancelButton::before {
		display: none !important; /* kill the desktop separator line */
	}
	body.page-events-editor .editorHeaderButtons .cancelButton {
		margin-left: 0 !important;
	}
	body.page-events-editor .editorHeaderButtons > .btn,
	body.page-events-editor .editorHeaderButtons > a.btn {
		flex: 1 1 calc(50% - 3px) !important;
		min-width: 0 !important;
		width: auto !important;
		margin: 0 !important;
		height: 36px !important;
	}
	/* Save button gets visual priority — full width on its own row */
	body.page-events-editor .editorHeaderButtons .saveButton {
		order: 99 !important;
		flex: 1 1 100% !important;
	}
	body.page-events-editor .editorHeaderButtons .cancelButton {
		order: 98 !important;
		flex: 1 1 100% !important;
	}
	body.page-events-editor .editorHeaderButtons .cloneButton,
	body.page-events-editor .editorHeaderButtons .noPermissionAnchorEvent {
		order: 2 !important;
	}
	body.page-events-editor .editorHeaderButtons > a[target="_blank"].btn {
		order: 1 !important;
	}

	/* Tighten tab padding so the nav doesn't dominate the viewport. */
	body.page-events-editor #nav-tab.nav-tabs > .nav-link {
		padding: 8px 12px !important;
	}

	/* Card columns inside tabs go full-width instead of side-by-side. */
	body.page-events-editor #nav-data > .row > .col-sm-6,
	body.page-events-editor .tab-pane > .row > .col-sm-6 {
		padding: 16px !important;
		margin-bottom: 12px !important;
	}

	/* Multi-button toolbar rows above tables wrap with even spacing instead of squashing onto one line. */
	main .btn-toolbar > .btn-group,
	main .btn-toolbar > .btn {
		flex: 1 1 auto;
		margin-bottom: 0.25rem;
	}

	/* Modal forms: stop fixed positioning pushing content under the navbar. */
	body.page-scheduling-expenses .file-info {
		position: static;
		top: auto;
	}
	body.page-scheduling-expenses .file-name {
		max-width: 100%;
	}

	/* Modal dialogs: leverage the full viewport width on phone so forms
	   inside don't get cut off by the default modal padding. */
	.modal-dialog {
		margin: 0.5rem;
	}
	.modal-body {
		padding: 0.75rem;
	}

	/* Form rows where children stack: give a small gap between rows. */
	main .form-row > [class*="col-"] {
		margin-bottom: 0.5rem;
	}
}
/* === /responsive === */

/* Tab-pane action-row ghost buttons: keep "Manage Catalog" (and similar
   .btn-outline-secondary links sitting between other buttons) visible
   at all viewports. The desktop ghost design relied on adjacent buttons
   to anchor it, but visually it read as plain text — give it a soft
   border + surface fill so the cluster reads as a row of buttons. */
body.page-events-editor .tab-pane .float-end > .btn-outline-secondary,
body.page-events-editor .tab-pane .float-end > a.btn-outline-secondary,
body.page-events-editor .tab-pane .float-right > .btn-outline-secondary,
body.page-events-editor .tab-pane .float-right > a.btn-outline-secondary {
	border-color: var(--line);
	background: var(--surface);
	color: var(--ink);
}
body.page-events-editor .tab-pane .float-end > .btn-outline-secondary:hover,
body.page-events-editor .tab-pane .float-right > .btn-outline-secondary:hover {
	background: var(--surface-2);
	color: var(--ink);
	border-color: var(--line-strong, var(--line));
}


/* ============================================================
   v9 CHROME — app-shell layout: sidebar + main + actionbar.
   Styles pasted verbatim from .claude/design/02-seasons-v9-responsive.html — do not retouch values (canonical mockup).
   ============================================================ */

/* Reset old fixed-navbar offset — new shell doesn't use fixed-top */
body { padding-top: 0; }
/* Reserve bottom space (~48px) so short pages don't get their bottom row overlapped by the fixed footer. */
main { padding: 0; padding-bottom: 48px; }

.shell {
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	min-height: 100vh;
	transition: grid-template-columns 0.2s ease;
}
.shell.sb-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }

.sidebar {
	background: var(--surface-sb);
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	/* overflow: visible so collapsed-item hover tooltips can pop out to the right (.sb-scroll handles menu scrolling). */
	overflow: visible;
	transition: transform 0.2s ease;
}

/* Collapsed (icon-rail) state */
.shell.sb-collapsed .sb-brand-mark,
.shell.sb-collapsed .sb-collapse,
.shell.sb-collapsed .sb-search input,
.shell.sb-collapsed .sb-search .kbd,
.shell.sb-collapsed .sb-section-head,
.shell.sb-collapsed .sb-item .badge,
.shell.sb-collapsed .sb-item .dot-new,
.shell.sb-collapsed .sb-item .kbd,
.shell.sb-collapsed .sb-item:not(.quick) > *:not(svg),
.shell.sb-collapsed .theme-toggle button span,
.shell.sb-collapsed .theme-toggle button { font-size: 0; }
.shell.sb-collapsed .sb-item { justify-content: center; padding: 8px 0; }
.shell.sb-collapsed .sb-item.quick {
	width: 36px; height: 36px;
	margin: 4px auto 6px;
	justify-content: center;
	padding: 0;
}
.shell.sb-collapsed .sb-brand { padding: 14px 0; justify-content: center; }
.shell.sb-collapsed .sb-search { margin: 0 12px 8px; padding: 0; justify-content: center; }
.shell.sb-collapsed .sb-search input, .shell.sb-collapsed .sb-search .kbd { display: none; }
.shell.sb-collapsed .theme-toggle { display: none; }
.shell.sb-collapsed .sb-item.active::before { left: 0; }
/* Sidebar hover tooltip (JS-injected at body level to escape the .sb-scroll clipping context). */
.sb-tooltip {
	position: fixed;
	z-index: 1000;
	background: var(--ink);
	color: var(--bg);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	font-family: var(--font-sans);
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.08s ease;
}
.sb-tooltip.show { opacity: 1; }

/* === Sidebar-collapsed overrides === font-size:0 on .sb-item itself (labels are bare text nodes a child selector can't reach). */
.shell.sb-collapsed .sb-item:not(.quick) { font-size: 0; line-height: 1; }
.shell.sb-collapsed .sb-item:not(.quick) > svg { width: 16px; height: 16px; }
.shell.sb-collapsed .sb-collapse,
.shell.sb-collapsed .sb-brand-mark { display: none; }
/* Brand logo stays visible and acts as the expand-toggle in collapsed state. */
.sb-brand-logo { cursor: pointer; user-select: none; transition: opacity 0.1s ease; }
.sb-brand-logo:hover { opacity: 0.85; }
/* Collapse-chevron button hover affordance. */
.sb-collapse {
	margin-left: auto;
}
.sb-collapse:focus { outline: none; }

/* Sidebar — brand */
.sb-brand {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
}
.sb-brand-logo {
	width: 28px; height: 28px;
	background: var(--inv-bg);
	border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
	color: var(--inv-fg);
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 14px;
}
.sb-brand-mark {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	flex: 1;
}
.sb-brand-mark .name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.sb-brand-mark .sub {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sb-collapse {
	width: 26px; height: 26px;
	border: none;
	background: transparent;
	border-radius: 4px;
	cursor: pointer;
	color: var(--ink-mute);
	display: flex; align-items: center; justify-content: center;
}
.sb-collapse:hover { background: var(--surface-2); color: var(--ink); }

/* Sidebar — search (placeholder; wired to cmdk) */
.sb-search {
	margin: 0 12px 8px;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	height: 32px;
	flex-shrink: 0;
}
.sb-search:focus-within { border-color: var(--line-strong); background: white; }
.sb-search svg { color: var(--ink-mute); flex-shrink: 0; }
.sb-search input {
	border: none; outline: none; background: transparent;
	font-family: inherit; font-size: 13px;
	flex: 1; color: var(--ink); min-width: 0;
}
.sb-search input::placeholder { color: var(--ink-mute); }
.sb-search .kbd {
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 1px 5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--ink-mute);
	background: var(--surface-2);
}

/* Sidebar — scroll area */
.sb-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 4px 0 12px;
	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}
/* WebKit (Chrome/Edge/Safari) */
.sb-scroll::-webkit-scrollbar { width: 4px; }
.sb-scroll::-webkit-scrollbar-track { background: transparent; }
.sb-scroll::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border-radius: 2px;
}
.sb-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
.sb-scroll::-webkit-scrollbar-corner { background: transparent; }

/* Sidebar — section header */
.sb-section { padding: 4px 12px 2px; }
.sb-section + .sb-section { margin-top: 6px; }
.sb-section-head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 6px 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}
.sb-section-head:hover { color: var(--ink); }
.sb-section-head .chev {
	width: 11px; height: 11px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform 0.15s;
	opacity: 0.6;
}
.sb-section.collapsed .chev { transform: rotate(-90deg); }
.sb-section.collapsed .sb-section-body { display: none; }
.sb-section-head .count {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-faint);
	font-weight: 400;
}

/* Sidebar — items */
.sb-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 9px;
	border-radius: var(--r-sm);
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	position: relative;
	transition: background 0.08s;
	text-decoration: none;
}
.sb-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.sb-item.active {
	background: var(--surface-2);
	color: var(--ink);
}
.sb-item.active::before {
	content: '';
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px; height: 18px;
	background: var(--ink);
	border-radius: 0 2px 2px 0;
}
.sb-item svg { flex-shrink: 0; color: var(--ink-mute); }
.sb-item:hover svg, .sb-item.active svg { color: var(--ink); }
.sb-item .badge {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 0 5px;
	height: 18px;
	display: inline-flex; align-items: center;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink-mute);
	font-weight: 500;
}
.sb-item.active .badge { background: var(--inv-bg); color: var(--inv-fg); }
.sb-item .dot-new {
	margin-left: auto;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.sb-item.quick {
	margin: 4px 0 6px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
}
.sb-item.quick:hover { background: var(--surface-2); border-color: var(--line-strong); }
.sb-item.quick .kbd {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 1px 5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--ink-mute);
	background: var(--surface-2);
}

/* Sidebar — user/theme footer (theme toggle wired in Phase 4B).
   Lives at the bottom of the sidebar's flex column. Because the sidebar is
   `position: sticky; top: 0; height: 100vh`, this lands at the viewport
   bottom — aligned with the main page footer (.footer) to form ONE
   continuous bottom bar across sidebar + main. Matches v15 mockup §1364. */
.sb-foot {
	border-top: 1px solid var(--line);
	padding: 6px 10px;
	min-height: 36px;
	box-sizing: border-box;
	flex-shrink: 0;
	background: var(--surface-sb);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sb-foot .theme-toggle { margin-bottom: 0; width: 100%; }

.theme-toggle {
	display: flex;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 0.5px;
	margin: 0;
	gap: 1px;
	width: 100%;
}
.theme-toggle button {
	flex: 1;
	background: transparent;
	border: none;
	padding: 3px 4px;
	border-radius: 3px;
	cursor: pointer;
	color: var(--ink-mute);
	display: inline-flex; align-items: center; justify-content: center;
	gap: 4px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	transition: all 0.12s;
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.active { background: var(--surface-2); color: var(--ink); }
.theme-toggle button svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Main content area — 52px bottom padding clears the fixed footer. */
.shell > .main {
	min-width: 0;
	padding: 24px 32px 52px;
	min-height: 100vh;
}

/* Top action bar */
.actionbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}
.crumbs {
	display: flex; align-items: center; gap: 6px;
	font-size: 13px;
	color: var(--ink-mute);
	flex: 1;
}
.crumbs .sep { opacity: 0.5; }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .current { color: var(--ink); font-weight: 500; }

.actionbar-actions { display: flex; gap: 6px; align-items: center; }

/* === v15 page head === title + sub-text left, action buttons right (<header class="page-head">). */
.page-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: end;
	margin-bottom: 24px;
}
.page-head .page-title {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--ink);
	line-height: 1.1;
	margin: 0;
}
.page-head .page-title a {
	color: inherit;
	text-decoration: none;
}
.page-head .page-title a:hover { color: var(--accent); }
.page-head .page-sub {
	font-size: 14px;
	color: var(--ink-mute);
	margin: 6px 0 0;
	max-width: 580px;
	line-height: 1.55;
}
.page-head .page-actions {
	display: flex;
	gap: 7px;
	align-items: center;
	flex-wrap: wrap;
}
.page-head .page-actions .btn {
	height: 34px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	padding: 7px 12px;
	line-height: 1.2;
}
.page-head .page-actions .btn svg { flex-shrink: 0; }
@media (max-width: 720px) {
	.page-head { grid-template-columns: 1fr; }
	.page-head .page-title { font-size: 24px; }
	.page-head .page-actions { justify-content: flex-start; }
}

/* === v15 toolbar (segmented control row for the events month nav, etc.) === */
.toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.toolbar .tb-spacer { flex: 1; }
.toolbar .tb-nav-btn {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	font-size: 16px;
	transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.toolbar .tb-nav-btn:hover {
	background: var(--surface-2);
	border-color: var(--ink-mute);
	color: var(--accent);
}
.toolbar .tb-label {
	font-size: 12px;
	color: var(--ink-mute);
	font-weight: 500;
	margin-right: 2px;
}
.toolbar .ts-wrapper {
	min-width: 160px;
}
.icon-btn {
	width: 30px; height: 32px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-soft);
	cursor: pointer;
	position: relative;
	transition: all 0.1s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* Actionbar feedback shortcuts: neutral at rest, semantic tint on hover (red = bug, green = feature). */
.icon-btn.feedback-btn { text-decoration: none; }
.icon-btn.feedback-bug:hover {
	background: rgba(185, 28, 28, 0.08);
	border-color: var(--red);
	color: var(--red);
}
.icon-btn.feedback-feature:hover {
	background: rgba(22, 163, 74, 0.10);
	border-color: #16A34A;
	color: #15803D;
}
[data-theme="dark"] .icon-btn.feedback-bug:hover {
	background: rgba(248, 113, 113, 0.12);
	border-color: #F87171;
	color: #F87171;
}
[data-theme="dark"] .icon-btn.feedback-feature:hover {
	background: rgba(74, 222, 128, 0.12);
	border-color: #4ADE80;
	color: #4ADE80;
}

/* Hamburger — visible on mobile */
.hamburger {
	display: none;
	width: 32px; height: 32px;
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: var(--r-sm);
	cursor: pointer;
	align-items: center; justify-content: center;
	color: var(--ink-soft);
	margin-right: 4px;
}
.hamburger:hover { background: var(--surface-2); color: var(--ink); }

/* User chip in top actionbar */
.top-user {
	display: flex; align-items: center; gap: 8px;
	padding: 3px 12px 3px 3px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	cursor: pointer;
	margin-left: 4px;
	transition: background 0.1s;
}
.top-user:hover { background: var(--surface-2); }
.top-user .avatar {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--inv-bg);
	color: var(--inv-fg);
	font-size: 11px;
	font-weight: 600;
	display: flex; align-items: center; justify-content: center;
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}
.top-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.top-user .avatar::after {
	content: '';
	position: absolute;
	bottom: -1px; right: -1px;
	width: 8px; height: 8px;
	background: #22C55E;
	border-radius: 50%;
	border: 2px solid var(--surface);
}
.top-user .name { font-size: 13px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.top-user .name-sub { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.top-user .meta { line-height: 1.2; display: flex; flex-direction: column; }
.top-user .chev { color: var(--ink-mute); }

/* Mobile drawer backdrop */
.mobile-backdrop {
	position: fixed; inset: 0;
	background: rgba(9, 9, 11, 0.4);
	opacity: 0; pointer-events: none;
	transition: opacity 0.18s;
	z-index: 55;
}
.mobile-backdrop.open { opacity: 1; pointer-events: auto; }

/* === Small devices: ≤1100px — sidebar becomes off-canvas drawer (icon-rail mode is desktop-only). === */
@media (max-width: 1100px) {
	.shell { grid-template-columns: 1fr; }
	.sidebar {
		position: fixed;
		left: 0; top: 0; bottom: 0;
		width: 260px;
		z-index: 60;
		transform: translateX(-100%);
		box-shadow: 4px 0 24px rgba(9, 9, 11, 0.12);
	}
	.sidebar.mobile-open { transform: translateX(0); }
	/* Open-drawer state: restore the full expanded look, defending against a stray .sb-collapsed from localStorage. */
	.sidebar.mobile-open .sb-brand-mark,
	.sidebar.mobile-open .sb-collapse,
	.sidebar.mobile-open .sb-search input,
	.sidebar.mobile-open .sb-search .kbd,
	.sidebar.mobile-open .sb-section-head,
	.sidebar.mobile-open .sb-item .badge,
	.sidebar.mobile-open .sb-item .dot-new,
	.sidebar.mobile-open .sb-item .kbd,
	.sidebar.mobile-open .sb-item > *,
	.sidebar.mobile-open .theme-toggle { display: flex; }
	.sidebar.mobile-open .sb-item { justify-content: flex-start; padding: 7px 9px; font-size: 14px; }
	.sidebar.mobile-open .sb-item.quick { width: auto; height: auto; padding: 6px 8px; margin: 4px 0 6px; }
	.sidebar.mobile-open .sb-brand { padding: 14px 16px; justify-content: flex-start; }
	.sidebar.mobile-open .sb-search { padding: 0 10px; justify-content: flex-start; margin: 0 12px 8px; }
	.sidebar.mobile-open .sb-item.active::before { left: -12px; }

	.hamburger { display: inline-flex; }

	.shell > .main { padding: 20px 24px 64px; }
}

/* === Mobile-specific tweaks: ≤720px — tighter spacing, no breadcrumb chain === */
@media (max-width: 720px) {
	.shell > .main { padding: 16px 16px 56px; }

	.top-user .name-sub { display: none; }
	.top-user { padding: 3px 8px 3px 3px; }

	.crumbs { font-size: 12px; min-width: 0; overflow: hidden; }
	.crumbs a { display: none; }
	.crumbs .sep { display: none; }
}
/* === /v9 chrome === */


/* ============================================================
   v9 COMMAND PALETTE — triggers ⌘K / Ctrl-K / `/` / search button. Items scraped from sidebar .sb-item links (inherits permission filtering).
   CSS pasted verbatim from .claude/design/02-seasons-v9-responsive.html.
   ============================================================ */
.cmdk-backdrop {
	position: fixed; inset: 0;
	background: rgba(9, 9, 11, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0; pointer-events: none;
	transition: opacity 0.15s;
	z-index: 100;
	display: flex; align-items: flex-start; justify-content: center;
	padding-top: 14vh;
}
[data-theme="dark"] .cmdk-backdrop { background: rgba(0, 0, 0, 0.7); }
.cmdk-backdrop.open { opacity: 1; pointer-events: auto; }

.cmdk {
	width: 1040px; max-width: 92vw;
	max-height: 68vh;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 24px 48px rgba(9, 9, 11, 0.18), 0 4px 12px rgba(9, 9, 11, 0.06);
	display: flex; flex-direction: column;
	transform: translateY(-8px) scale(0.98);
	transition: transform 0.18s;
	overflow: hidden;
}
[data-theme="dark"] .cmdk { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.cmdk-backdrop.open .cmdk { transform: translateY(0) scale(1); }

.cmdk-search {
	display: flex; align-items: center;
	gap: 11px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
}
.cmdk-search svg { color: var(--ink-mute); flex-shrink: 0; }
.cmdk-search input {
	border: none; outline: none; background: transparent;
	flex: 1;
	font-family: inherit;
	font-size: 16px;
	color: var(--ink);
}
.cmdk-search input::placeholder { color: var(--ink-mute); }
.cmdk-search .esc {
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 2px 7px;
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--ink-mute);
	background: var(--surface-2);
}

/* The list is the vertical scroll container; overflow-x:hidden stops the grid below scrolling sideways. */
.cmdk-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px; }

/* Browse mode: section groups laid out row-major in a 3-column grid (filtering renders a single focused list). */
.cmdk-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 26px;
	align-items: start;
}
.cmdk-cols .cmdk-group { padding-bottom: 10px; }
@media (max-width: 760px) {
	.cmdk-cols { grid-template-columns: 1fr; gap: 0; }
}

.cmdk-group { padding: 6px 4px 2px; }
.cmdk-group-head {
	padding: 6px 10px 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 500;
}

.cmdk-item {
	display: flex; align-items: center; gap: 11px;
	padding: 9px 10px;
	border-radius: var(--r-sm);
	cursor: pointer;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
}
.cmdk-item:hover, .cmdk-item.kbd-active { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.cmdk-item .icon {
	width: 22px; height: 22px;
	border-radius: 5px;
	background: var(--surface-2);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-soft);
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 11px;
}
.cmdk-item.kbd-active .icon { background: var(--inv-bg); color: var(--inv-fg); }
.cmdk-item .label { flex: 1; min-width: 0; }
.cmdk-item .sub {
	font-size: 12px;
	color: var(--ink-mute);
	margin-top: 1px;
}
.cmdk-item .right {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-mute);
}
.cmdk-item .kbd {
	font-family: var(--font-mono);
	font-size: 10.5px;
	padding: 1.5px 5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--ink-mute);
	background: var(--surface-2);
}
.cmdk-item.kbd-active .kbd { border-color: var(--line-strong); }

.cmdk-foot {
	padding: 8px 14px;
	border-top: 1px solid var(--line);
	background: var(--surface-2);
	display: flex; align-items: center; gap: 16px;
	font-size: 11px;
	color: var(--ink-mute);
	font-family: var(--font-mono);
}
.cmdk-foot .item { display: inline-flex; align-items: center; gap: 5px; }
.cmdk-foot .kbd {
	font-size: 10px;
	padding: 1px 5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--surface);
	color: var(--ink-soft);
}
.cmdk-foot .spacer { flex: 1; }

.cmdk-empty {
	padding: 20px;
	text-align: center;
	color: var(--ink-mute);
	font-size: 13px;
}
/* === /cmdk === */


/* ============================================================
   .data-list — shared list partial (pairs with _data-list-{open,close}.php + initDataList() in cloud.js).
   Wraps a DataTables list with Table↔Cards and Wide↔Compact toggles.
   ============================================================ */

.data-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* positioning context for the absolutely-floated toolbar of auto-wrapped grids */
	position: relative;
}
/* Top scroll proxy — a thin scrollbar above the table, scrollLeft-synced with the bottom one (created lazily in cloud.js). */
.data-list .data-list-topscroll {
	overflow-x: auto;
	overflow-y: hidden;
	height: 14px;
	margin-bottom: 4px;
	/* Match the bottom scrollbar's appearance (browser-native). */
	scrollbar-width: thin;
}
.data-list .data-list-topscroll-inner {
	height: 1px;
}
/* Strip the 12px col padding on the col wrapping the table so it isn't 24px narrower than the wrapper (DT's BS5 dom adds it). */
.data-list.data-list-auto .dataTables_wrapper .col:has(> table.dataTable),
.data-list.data-list-auto .dataTables_wrapper .col:has(> table.responsive-cards) {
	padding-left: 0;
	padding-right: 0;
}
/* Also kill the row's -12px negative margins, else the table shifts 12px left of the wrapper edge. */
.data-list.data-list-auto .dataTables_wrapper > .row:has(> .col > table.dataTable),
.data-list.data-list-auto .dataTables_wrapper > .row:has(> .col > table.responsive-cards) {
	margin-left: 0;
	margin-right: 0;
}

.data-list-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	justify-content: flex-end;
	white-space: nowrap;
}
.data-list-toolbar-spacer { display: none; }

/* Auto-wrapped grids: reserve 46px above the table for the absolute toolbar. */
.data-list.data-list-auto {
	gap: 0;
	padding-top: 46px;
	margin-top: 16px;
	position: relative;
}
.data-list.data-list-auto > .data-list-toolbar {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	margin: 0;
	pointer-events: none;
}
.data-list.data-list-auto > .data-list-toolbar > * {
	pointer-events: auto;
}
.data-list.data-list-auto > .data-list-toolbar .data-list-views,
.data-list.data-list-auto > .data-list-toolbar .data-list-density {
	background: var(--surface);
}

/* Narrow viewports: pull the toolbar back into flow (the 4 pills can't share one line) and drop the reserved padding. */
@media (max-width: 575.98px) {
	.data-list.data-list-auto {
		padding-top: 0;
	}
	.data-list.data-list-auto > .data-list-toolbar {
		position: static;
		justify-content: flex-end;
		flex-wrap: wrap;
		row-gap: 8px;
		margin-bottom: 12px;
		pointer-events: auto;
	}
}
/* Bluecloud pattern: length-menu lives in the bottom row, so hide the wrapper's always-empty top row. */
.data-list.data-list-auto .dataTables_wrapper > .row:first-child {
	display: none;
}
.data-list.data-list-auto .dataTables_wrapper {
	margin-top: 0;
}

/* List-page DataTables (e.g. /events/add-ons/index.php, /events/add-ons/
   purchases.php) opt into a different shell layout than the editor-tab
   tables. They keep the DT search row visible at the top (searching is
   primary navigation), pull the data-list shell into normal flow (so the
   absolute toolbar doesn't crowd the search input), and hide the
   redundant `.buttonBar` injected by grids.js' setupGridDefaults (the
   autoWrap btnbar already covers the same chips). autoWrapDataTables
   adds the `.data-list-with-search` class to the shell when it detects
   either a visible `.dataTables_filter input` or a `.buttonBar` inside
   the wrapped DT — see the JS init for the detection. */
.data-list.data-list-auto.data-list-with-search .dataTables_wrapper > .row:first-child {
	display: flex;
	margin-bottom: 12px;
}
.data-list.data-list-auto.data-list-with-search .dataTables_wrapper > .row:first-child > .col-sm-6:first-child {
	/* length-menu (left half of DT's top row) — redundant with the
	   bottom-row pageLength chip from the autoWrap btnbar. */
	display: none;
}
.data-list.data-list-auto.data-list-with-search .dataTables_wrapper > .row:first-child > .col-sm-6:last-child {
	margin-left: auto;
	flex: 0 0 auto;
	width: auto;
}
/* Inline search layout: keep "Search:" label, input, and the optional
   tap-to-search button (from grids.js) on one line. Default DataTables
   theme + our mobile rules stack them vertically; this rule wins by
   specificity (it's deeper than the mobile @media block above). */
.data-list.data-list-auto.data-list-with-search .dataTables_filter label {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 0.5rem;
	width: auto !important;
	margin: 0;
}
.data-list.data-list-auto.data-list-with-search .dataTables_filter input {
	width: auto !important;
	min-width: 180px;
	max-width: 240px !important;
	flex: 0 1 auto;
	margin: 0 !important;
}
.data-list.data-list-auto.data-list-with-search .dataTables_filter .dt-search-trigger {
	align-self: center;
	margin: 0 !important;
}
.data-list.data-list-auto.data-list-with-search {
	padding-top: 0;
	margin-top: 0;
}
.data-list.data-list-auto.data-list-with-search > .data-list-toolbar {
	position: static;
	justify-content: flex-end;
	margin-bottom: 8px;
	pointer-events: auto;
}
.data-list.data-list-auto.data-list-with-search .dataTables_wrapper .buttonBar {
	display: none;
}
.data-list.data-list-auto.data-list-with-search .dataTables_wrapper > .row:last-child > .totalRecords {
	margin-right: auto;
}

/* Bottom row layout: length-menu (left) · info (middle) · paginate (right) */
.data-list.data-list-auto .dataTables_wrapper > .row:last-child {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.data-list.data-list-auto .dataTables_wrapper > .row:last-child > .col,
.data-list.data-list-auto .dataTables_wrapper > .row:last-child > [class*="col-"] {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}
/* ============================================================
   Bluecloud bottom row for auto-wrapped grids: [info ← grows] [btnbar] [paginate].
   DT-Buttons-BS5 (2.4.3) renders buttons as `.btn.btn-secondary` (no legacy `.dt-button`) — selectors target that.
   ============================================================ */

/* Bottom row → flex; cols size to content with one growing on the left */
.data-list.data-list-auto .dataTables_wrapper > .row:last-child {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}
.data-list.data-list-auto .dataTables_wrapper > .row:last-child > [class*="col-"] {
	padding: 0;
	max-width: none;
	flex: 0 0 auto;
	width: auto;
}
/* Info col grows to fill the leftover space, pushing btnbar+paginate right */
.data-list.data-list-auto .dataTables_wrapper > .row:last-child > [class*="col-"]:has(.dataTables_info) {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
}
.data-list.data-list-auto .data-list-btnbar {
	order: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0;
}
.data-list.data-list-auto .dataTables_wrapper > .row:last-child > [class*="col-"]:has(.dataTables_paginate) {
	order: 3;
}

/* Apply the same [info ← grows][buttons][pager] bottom-row layout to manual (non-auto) data-list grids. */
.data-list:not(.data-list-auto) .dataTables_wrapper > .row:last-child {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.data-list:not(.data-list-auto) .dataTables_wrapper > .row:last-child > [class*="col-"] {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}
.data-list:not(.data-list-auto) .dataTables_wrapper > .row:last-child > .totalRecords {
	order: 1;
	flex: 1 1 auto;       /* grows to push the buttons + pager to the right */
	min-width: 0;
}
.data-list:not(.data-list-auto) .dataTables_wrapper > .row:last-child > .buttonBar {
	order: 2;
}
.data-list:not(.data-list-auto) .dataTables_wrapper > .row:last-child > .thePager {
	order: 3;
}

/* DT-Buttons cluster — 30px icon chips, no shadow, hairline border. */
.data-list-btnbar .dt-buttons {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0;
}
.data-list-btnbar .dt-buttons .btn,
.data-list-btnbar .dt-buttons .btn-group > .btn,
.data-list-btnbar .dt-buttons .btn.btn-secondary,
.data-list-btnbar .dt-buttons .btn-group > .btn.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	background-color: var(--surface);
	color: var(--ink-mute);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: none;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.data-list-btnbar .dt-buttons .btn:hover,
.data-list-btnbar .dt-buttons .btn:focus,
.data-list-btnbar .dt-buttons .btn:focus-visible,
.data-list-btnbar .dt-buttons .btn.btn-secondary:hover,
.data-list-btnbar .dt-buttons .btn.btn-secondary:focus,
.data-list-btnbar .dt-buttons .btn.btn-secondary:focus-visible {
	background-color: var(--accent-bg);
	color: var(--accent);
	border-color: var(--accent);
	outline: none;
}
/* Open state for dropdown buttons (colvis, pageLength) */
.data-list-btnbar .dt-buttons .btn[aria-expanded="true"],
.data-list-btnbar .dt-buttons .btn.btn-secondary[aria-expanded="true"],
.data-list-btnbar .dt-buttons .btn-group.open > .btn,
.data-list-btnbar .dt-buttons .btn-group.show > .btn {
	background-color: var(--accent);
	color: #fff;
	border-color: var(--accent);
}
/* The icon span shouldn't intercept clicks */
.data-list-btnbar .dt-buttons .btn > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
/* Strip caret arrow after dropdown-toggle — the icon already implies "more" */
.data-list-btnbar .dt-buttons .btn.dropdown-toggle::after {
	display: none;
}
/* BS5 collapses adjacent .btn-group borders — restore independent ones for the icon chips. */
.data-list-btnbar .dt-buttons .btn-group {
	box-shadow: none;
	border-radius: 0;
}
.data-list-btnbar .dt-buttons .btn-group > .btn {
	border-radius: var(--r-sm);
}

/* DT-Buttons dropdown menu (colvis / pageLength popup) */
div.dt-button-collection,
.dt-button-collection {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	padding: 6px;
	min-width: 200px;
}
.dt-button-collection .dt-button,
.dt-button-collection .btn,
.dt-button-collection .btn.btn-secondary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	padding: 6px 10px;
	margin: 1px 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 13px;
	text-align: left;
	border-radius: var(--r-sm);
}
.dt-button-collection .dt-button:hover,
.dt-button-collection .btn:hover {
	background: var(--surface-2);
	color: var(--ink);
}
.dt-button-collection .dt-button.active,
.dt-button-collection .btn.active {
	background: var(--accent-bg);
	color: var(--accent);
	font-weight: 600;
}

[data-theme="dark"] div.dt-button-collection,
[data-theme="dark"] .dt-button-collection {
	background: var(--surface);
	border-color: var(--line);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Reload loading state — dim the table while ajax is in flight (class toggled by autoWrapDataTables). */
.data-list.data-list-loading .data-list-body {
	position: relative;
}
.data-list.data-list-loading .data-list-body::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.55);
	z-index: 5;
	pointer-events: none;
	animation: data-list-loading-fade 0.15s ease;
}
[data-theme="dark"] .data-list.data-list-loading .data-list-body::after {
	background: rgba(9, 9, 11, 0.55);
}
.data-list.data-list-loading .dataTables_wrapper {
	pointer-events: none;
}
.data-list.data-list-loading .data-list-btnbar {
	pointer-events: auto; /* keep the buttons clickable during reload */
}
@keyframes data-list-loading-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* Table mode stays tabular regardless of viewport (card collapse is Card view's job; body scrolls horizontally).
   :not(.density-wide) lets the density-wide rules below own the scrollbar placement. */
.data-list.data-list-auto.view-table:not(.density-wide) .data-list-body {
	overflow-x: visible;
}
.data-list.data-list-auto.view-table:not(.density-wide) .dataTables_wrapper {
	width: 100%;
	overflow-x: visible;
}
.data-list.data-list-auto.view-table table.responsive-cards,
.data-list.data-list-auto.view-table table.dataTable {
	display: table !important;
	width: auto !important;
	max-width: none !important;
	min-width: 100% !important;
	table-layout: auto !important;
}
.data-list.data-list-auto.view-table table.responsive-cards > thead,
.data-list.data-list-auto.view-table table.dataTable > thead {
	display: table-header-group !important;
}
.data-list.data-list-auto.view-table table.responsive-cards > tbody,
.data-list.data-list-auto.view-table table.dataTable > tbody {
	display: table-row-group !important;
}
.data-list.data-list-auto.view-table table.responsive-cards > tbody > tr,
.data-list.data-list-auto.view-table table.dataTable > tbody > tr {
	display: table-row !important;
}
.data-list.data-list-auto.view-table table.responsive-cards > thead > tr > th,
.data-list.data-list-auto.view-table table.dataTable > thead > tr > th,
.data-list.data-list-auto.view-table table.responsive-cards > tbody > tr > td,
.data-list.data-list-auto.view-table table.dataTable > tbody > tr > td {
	display: table-cell !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
}
/* Override the BS5 events-editor td rule that wraps long text — in
   Table view we want columns to keep their natural width and the
   container to scroll, not wrap text inside cells. */
.data-list.data-list-auto.view-table table.dataTable > tbody > tr > td {
	min-width: max-content;
}
/* Hide the responsive plugin's card-label ::before pseudo-content */
.data-list.data-list-auto.view-table table.responsive-cards > tbody > tr > td::before,
.data-list.data-list-auto.view-table table.dataTable > tbody > tr > td::before {
	display: none !important;
}
/* Override the events-editor's stricter `table { width: 100% }` inside .view-table. */
body.page-events-editor .data-list.data-list-auto.view-table table.dataTable,
body.page-events-editor .data-list.data-list-auto.view-table table.table {
	width: auto !important;
	max-width: none !important;
	min-width: 100% !important;
}

/* Empty cell marker in card view — em-dash in muted color */
.data-list-card-empty {
	color: var(--ink-faint);
}

.data-list-views,
.data-list-density {
	display: inline-flex;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 2px;
	gap: 1px;
}

/* Toggle pills: quieter than the action buttons beside them; active state stays a strong filled bg. */
.data-list-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 9px;
	background: transparent;
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--ink-mute);
	font-family: inherit;
	font-size: calc(11.5px * var(--fs-scale, 1));
	font-weight: 600;
	letter-spacing: 0;
	transition: background-color 0.12s ease, color 0.12s ease;
	white-space: nowrap;
	line-height: 1;
}
.data-list-toggle:hover { color: var(--ink); background: var(--surface-2); }
.data-list-toggle.active { background: var(--ink); color: var(--surface); }
.data-list-toggle.active:hover { background: var(--ink); color: var(--surface); }
.data-list-toggle svg {
	flex-shrink: 0;
	width: 11px;
	height: 11px;
}
.data-list-views,
.data-list-density {
	padding: 2px;
}

.data-list-body {
	min-width: 0;
}

/* Wide / Compact (from bluecloud): Compact fits the container + wraps; Wide grows to content + scrolls horizontally. */

/* WIDE mode — scope the horizontal scroll to the table's col only, so the bottom row doesn't sit above a stray scrollbar. */
.data-list.density-wide .dataTables_wrapper > .row:not(:first-child):not(:last-child),
.data-list.density-wide .dataTables_wrapper > .row:not(:first-child):not(:last-child) > .col,
.data-list.density-wide .dataTables_wrapper > .row:not(:first-child):not(:last-child) > [class*="col-"] {
	/* min-width:0 overrides flex default (auto) so the col respects its flex width and confines the scroll here. */
	min-width: 0;
}
.data-list.density-wide .dataTables_wrapper > .row:not(:first-child):not(:last-child) > .col,
.data-list.density-wide .dataTables_wrapper > .row:not(:first-child):not(:last-child) > [class*="col-"] {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* DataTables case: body clips, the middle col scrolls (rule above). */
.data-list.density-wide .data-list-body:has(> .dataTables_wrapper) {
	overflow-x: hidden;
	max-width: 100%;
}
.data-list.density-wide .dataTables_wrapper {
	overflow-x: hidden;
	max-width: 100%;
}
/* Plain HTML table case (no DT wrapper): the body itself becomes the horizontal scroll zone. */
.data-list.density-wide .data-list-body:not(:has(> .dataTables_wrapper)) {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}
.data-list.density-wide table.dataTable,
.data-list.density-wide table.responsive-cards {
	width: max-content !important;
	min-width: 100% !important;
	max-width: none !important;
	table-layout: auto !important;
}
.data-list.density-wide table.dataTable > thead > tr > th,
.data-list.density-wide table.dataTable > tbody > tr > td,
.data-list.density-wide table.responsive-cards > thead > tr > th,
.data-list.density-wide table.responsive-cards > tbody > tr > td {
	white-space: nowrap !important;
	overflow-wrap: normal !important;
	padding: 10px 12px;
	font-size: calc(13.5px * var(--fs-scale, 1));
	width: auto !important;
	max-width: none !important;
}
/* Wide mode: hide DT-Responsive's child-row expander (all columns are already visible, just off-screen). */
.data-list.density-wide table.dataTable > tbody > tr.child,
.data-list.density-wide table.dataTable > tbody > tr.child-row,
.data-list.density-wide table.dataTable > tbody > tr.dtr-expanded + tr {
	display: none !important;
}
.data-list.density-wide table.dataTable > tbody > tr.parent .dtr-control::before,
.data-list.density-wide table.dataTable > tbody > tr .dtr-control::before {
	display: none !important;
}
/* Wide mode: don't let in-cell form controls shrink (flex collapses them to min-content, so the table reports a narrow width). */
.data-list.density-wide table .input-group,
.data-list.density-wide table .input-group-text {
	flex-wrap: nowrap !important;
	width: auto !important;
}
.data-list.density-wide table .input-group > .form-control,
.data-list.density-wide table .input-group > .form-select {
	flex: 0 0 auto !important;
	width: auto !important;
	/* 160px fits "02:00:00 AM" + caret; !important beats page-scoped 100px min-width rules. */
	min-width: 160px !important;
}
.data-list.density-wide table > tbody > tr > td > .form-control,
.data-list.density-wide table > tbody > tr > td > .form-select,
.data-list.density-wide table > tbody > tr > td > input,
.data-list.density-wide table > tbody > tr > td > select {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 120px !important;
}

/* COMPACT mode — table fits its container, cells wrap (every overflow ancestor needs overflow-x:hidden + cell width auto). */
.data-list.density-compact,
.data-list.density-compact .data-list-body,
.data-list.density-compact .data-list-body > .dataTables_wrapper,
.data-list.density-compact .dataTables_wrapper > .row,
.data-list.density-compact .dataTables_wrapper > .row > [class*="col-"],
.data-list.density-compact .dataTables_wrapper > .row > .col,
.data-list.density-compact .dataTables_scroll,
.data-list.density-compact .dataTables_scrollHead,
.data-list.density-compact .dataTables_scrollBody {
	overflow-x: hidden !important;
	max-width: 100% !important;
	min-width: 0 !important;
}
.data-list.density-compact table.dataTable,
.data-list.density-compact table.responsive-cards {
	/* Fill the container; long cols are capped by the inner .long-cell-wrap div (max-width on a <td> is ignored). */
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	table-layout: auto !important;
}
.data-list.density-compact table.dataTable > thead > tr > th,
.data-list.density-compact table.dataTable > tbody > tr > td,
.data-list.density-compact table.responsive-cards > thead > tr > th,
.data-list.density-compact table.responsive-cards > tbody > tr > td {
	/* Cells size to content; long cols are capped by their .long-cell-wrap div. */
	width: auto;
}
.data-list.density-compact table.dataTable > colgroup > col,
.data-list.density-compact table.responsive-cards > colgroup > col {
	width: auto !important;
}
/* Per-cell typography for compact mode (width sizing handled above + via .long-cell-wrap). */
.data-list.density-compact table.dataTable > thead > tr > th,
.data-list.density-compact table.dataTable > tbody > tr > td,
.data-list.density-compact table.responsive-cards > thead > tr > th,
.data-list.density-compact table.responsive-cards > tbody > tr > td {
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	padding: 6px 10px;
	font-size: calc(12.5px * var(--fs-scale, 1));
	line-height: 1.4;
	vertical-align: top;
}
/* Hide DT-Responsive's empty "control" column when no columns are collapsed (Compact mode wraps instead of hiding). */
.data-list table.dataTable:not(:has(.dtr-control)) > thead > tr > th.control,
.data-list table.dataTable:not(:has(.dtr-control)) > tbody > tr > td.control {
	display: none !important;
}
.data-list table.dataTable:not(:has(tr.parent)) > thead > tr > th.control,
.data-list table.dataTable:not(:has(tr.parent)) > tbody > tr > td.control {
	width: 0 !important;
	min-width: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* long-cell-wrap (cloud.js → wrapLongCells): max-width works on this inner <div> where it'd be ignored on the <td>. */
.data-list.density-compact .long-cell-wrap {
	display: block;
	/* fills the cell but caps at 14rem so long content wraps and short cells stay tight */
	width: 100%;
	max-width: 14rem;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.35;
}
/* Wide mode: relax the cap so unbreakable strings still wrap, but normal long names stay on one line. */
.data-list.density-wide .long-cell-wrap {
	display: block;
	max-width: 28rem;
	white-space: normal;
	overflow-wrap: anywhere;
}
.data-list.density-compact table.dataTable .btn-sm {
	padding: 2px 6px;
	font-size: calc(11px * var(--fs-scale, 1));
}

/* Suppress DataTables Select plugin's row-highlight by default. DT 1.13+
   paints each <td> inside `tr.selected` via an `inset 0 0 0 9999px`
   box-shadow (using --dt-row-selected as the color) — NOT a background.
   So we have to neutralize the shadow on each cell. The plugin also
   has a separate cell-level `td.selected` rule we strip too. Pages that
   actually use multi-row selection (bulk action toolbar) can re-enable
   the highlight per-page by adding `.data-list-show-selection` to their
   shell. */
.data-list:not(.data-list-show-selection) table.dataTable > tbody > tr.selected > *,
.data-list:not(.data-list-show-selection) table.dataTable > tbody > tr.selected:hover > *,
.data-list:not(.data-list-show-selection) table.dataTable > tbody > tr > td.selected,
.data-list:not(.data-list-show-selection) table.dataTable > tbody > tr > th.selected {
	box-shadow: none !important;
	background-color: inherit !important;
	color: inherit !important;
}
/* Also neutralize on the `tr.selected` itself for any older DT version
   that did background on the row. */
.data-list:not(.data-list-show-selection) table.dataTable > tbody > tr.selected,
.data-list:not(.data-list-show-selection) table.dataTable > tbody > tr.selected:hover {
	background-color: inherit !important;
	color: inherit !important;
	box-shadow: none !important;
}

/* Card grid — cap at 4 cards per row.
   `max(220px, calc(25% - 10px))` makes each column at least 220px wide
   AND at least ~25% of the container. The `- 10px` reserves room for
   the three 12px gaps between four columns (3 × 12 / 4 = 9, rounded
   up). Without it, pure `25%` causes 4 × 25% = 100% which can't fit
   alongside the gaps, so the grid falls back to 3 columns at wide
   viewports. Below 880px or so the 220px floor takes over and cards
   re-flow to 3, 2, 1 per row naturally. */
.data-list-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(220px, calc(25% - 10px)), 1fr));
	gap: 12px;
}
.data-list-cards[hidden] { display: none !important; }
/* Hide the DataTables wrapper / raw table when cards mode is active. The
   [hidden] attribute is set/removed by initDataList. !important here so
   any inline display style on .dataTables_wrapper or .table doesn't beat
   our hidden state. */
.data-list-body > .dataTables_wrapper[hidden],
.data-list-body > table[hidden] { display: none !important; }
/* DataTables' dom wraps the <table> in `<div class="row"><div class="col">`.
   The .col's 12px BS gutter padding (+ the .row's matching negative margin)
   makes the table render ~24px narrower than the .data-list shell — in
   Compact/Table view (where the table fits) its right edge sits inset from
   the toolbar/tabs/filters above it, reading as "not arranged". In Wide view
   the table is min-width:100% + scrolls so it isn't visible. Strip the gutter
   on the table's own row/col so the table aligns flush at both edges. Scoped
   with :has() to the row/col that actually holds the <table> (not the
   info/buttons/pager bottom row). */
.data-list .dataTables_wrapper > .row:has(> [class*="col"] > table.dataTable) {
	margin-left: 0;
	margin-right: 0;
}
.data-list .dataTables_wrapper > .row > [class*="col"]:has(> table.dataTable) {
	padding-left: 0;
	padding-right: 0;
}
/* Editor pane: pack cards denser (smaller min width) but still cap at 4 per row. */
body.page-events-editor .data-list-cards {
	grid-template-columns: repeat(auto-fill, minmax(max(180px, calc(25% - 8px)), 1fr));
	gap: 10px;
}
body.page-events-editor .data-list.density-compact .data-list-cards {
	grid-template-columns: repeat(auto-fill, minmax(max(160px, calc(25% - 6px)), 1fr));
	gap: 8px;
}

.data-list-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px;
	transition: border-color 0.1s, box-shadow 0.1s;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.data-list-card:hover {
	border-color: var(--line-strong);
	box-shadow: 0 2px 6px rgba(9, 9, 11, 0.04);
}
.data-list-card-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.data-list-card-meta {
	font-size: 13px;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Each row: label left, value right on one line; long values wrap in their right-aligned column. */
.data-list-card-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}
.data-list-card-meta-row .label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-faint);
	line-height: 1.4;
	white-space: nowrap;
	flex: 0 0 auto;
}
.data-list-card-meta-row .value,
.data-list-card-meta-row > :not(.label) {
	color: var(--ink);
	font-size: 13px;
	line-height: 1.4;
	text-align: right;
	overflow-wrap: anywhere;
	word-break: break-word;
	flex: 1 1 auto;
	min-width: 0;
}
.data-list-card-actions {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* Drag-to-reorder handle in the top-right corner of sortable cards. */
.data-list-card-sortable {
	position: relative;
}
.data-list-card-gripper {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	color: var(--ink-faint);
	cursor: grab;
	transition: color 0.12s ease, background-color 0.12s ease;
	z-index: 2;
	/* touch-action:none lets jQuery UI sortable capture the drag without the page scrolling */
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.data-list-card-gripper:hover {
	color: var(--ink);
	background-color: var(--surface-2);
}
.data-list-card-gripper:active { cursor: grabbing; }
.data-list-card-sortable .data-list-card-title {
	padding-right: 26px; /* keep title clear of the gripper */
}

/* Sortable placeholder while dragging */
.data-list-card-placeholder {
	background: var(--accent-bg);
	border: 1px dashed var(--accent);
	border-radius: var(--r-md);
	visibility: visible !important;
	box-sizing: border-box;
}

/* Card being dragged */
.data-list-card.ui-sortable-helper {
	box-shadow: 0 6px 20px rgba(9, 9, 11, 0.18);
	cursor: grabbing;
}

/* Card-mode density compact: tighter card padding */
.data-list.density-compact .data-list-cards { gap: 8px; }
.data-list.density-compact .data-list-card { padding: 10px 12px; gap: 4px; }
.data-list.density-compact .data-list-card-title { font-size: 13.5px; }

.data-list-empty {
	padding: 32px 20px;
	text-align: center;
	color: var(--ink-mute);
	font-size: 13px;
	grid-column: 1 / -1;
}

/* Cards view: hide the table itself; the pager etc. stay so the user can change page. */
.data-list.view-cards .dataTables_scrollHead,
.data-list.view-cards .dataTables_scrollBody table { display: none; }
/* === /.data-list === */


/* ============================================================
   USER TEXT-SIZE PICKER (in the user-chip dropdown)
   ============================================================ */
.text-size-picker-wrapper {
	padding: 6px 14px 8px;
}
.text-size-label {
	font-size: 11px;
	color: var(--ink-mute);
	font-family: var(--font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.text-size-picker {
	display: flex;
	gap: 2px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 2px;
}
.text-size-picker button {
	flex: 1;
	background: transparent;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	color: var(--ink-mute);
	padding: 4px 6px;
	font-family: inherit;
	font-weight: 500;
	transition: all 0.1s;
	line-height: 1;
}
.text-size-picker button:hover { color: var(--ink); }
.text-size-picker button.active {
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Make each A render at the size it'll set, so the picker is self-illustrating */
.text-size-picker button[data-size="sm"] { font-size: 12px; }
.text-size-picker button[data-size="md"] { font-size: 14px; }
.text-size-picker button[data-size="lg"] { font-size: 18px; }
.text-size-picker button[data-size="xl"] { font-size: 22px; }
.text-size-picker button sub,
.text-size-picker button sup {
	font-size: 0.75em;
	font-weight: 400;
}


/* ============================================================
   BOOTSTRAP BUTTONS — v15 visual restyle (override the CDN .btn-* look, no markup change).
   Hierarchy: .btn neutral · .btn-primary inverted · .btn-outline-primary neutral+accent · .btn-outline-secondary ghost · .btn-outline-danger red · .btn-light/-secondary subtle fill.
   ============================================================ */
.btn {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	padding: 7px 12px;
	height: 34px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
	box-shadow: none;
}
.btn:hover { background: var(--surface-2); color: var(--ink); }
/* Suppress the mouse-click focus ring (leaves a stuck halo); keep it for :focus-visible keyboard nav. */
.btn:focus {
	outline: none;
	box-shadow: none;
}
.btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-bg);
	border-color: var(--accent);
}
.btn:disabled, .btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}
.btn svg { flex-shrink: 0; }

/* Primary — defaults to v15 neutral (inverted); other styles via html[data-btn-style] below. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
	background: var(--inv-bg);
	color: var(--inv-fg);
	border-color: var(--inv-bg);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background: var(--inv-bg-hov);
	color: var(--inv-fg);
	border-color: var(--inv-bg-hov);
}

/* Outline primary — neutral surface by default; data-btn-style overrides switch it to accent. */
.btn-outline-primary {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):focus {
	background: var(--surface-2);
	color: var(--ink);
	border-color: var(--ink-mute);
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary.active {
	background: var(--surface-2);
	color: var(--accent);
	border-color: var(--accent);
}

/* Outline secondary — neutral outlined button.
   Previously this was a "ghost" (transparent everything) for use as a
   text-link-like secondary action, but the class is used in ~100 places
   across the app as a real button. The ghost styling made every one
   of those reads as plain text, which is why "Pick", "Manage Catalog",
   "Back to Event", "Remove Event", and others looked broken. Give the
   class a real button surface + border so every existing usage reads
   correctly without per-page overrides. Pages that genuinely want the
   ghost text-link look can use `.btn-link` (a standard BS5 class) or
   add a `.btn-ghost` modifier. */
.btn-outline-secondary {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--line);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):hover {
	background: var(--surface-2);
	color: var(--ink);
	border-color: var(--line-strong, var(--line));
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary.active {
	background: var(--surface-2);
	color: var(--ink);
	border-color: var(--line-strong, var(--line));
}
/* Opt-in ghost variant for a truly borderless text-style action. */
.btn-ghost,
.btn-outline-secondary.btn-ghost {
	background: transparent;
	color: var(--ink-soft);
	border-color: transparent;
}
.btn-ghost:hover,
.btn-outline-secondary.btn-ghost:hover {
	background: var(--surface-2);
	color: var(--ink);
	border-color: transparent;
}
/* Modals: give the lone ghost .btn-outline-secondary a border so it doesn't read as a stray text link. */
.modal .btn-outline-secondary {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--line);
}
.modal .btn-outline-secondary:hover,
.modal .btn-outline-secondary:focus,
.modal .btn-outline-secondary:not(:disabled):not(.disabled):hover {
	background: var(--surface-2);
	color: var(--ink);
	border-color: var(--line-strong, var(--line));
}

/* Outline danger — red border + red text, fills red on hover */
.btn-outline-danger {
	background: var(--surface);
	color: var(--red);
	border-color: var(--red);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:not(:disabled):not(.disabled):hover {
	background: var(--red);
	color: var(--bg);
	border-color: var(--red);
}

/* Outline success — same pattern, green */
.btn-outline-success {
	background: var(--surface);
	color: var(--green);
	border-color: var(--green);
}
.btn-outline-success:hover,
.btn-outline-success:not(:disabled):not(.disabled):hover {
	background: var(--green);
	color: var(--bg);
	border-color: var(--green);
}

/* Light / secondary — subtle neutral fill */
.btn-light, .btn-secondary {
	background: var(--surface-2);
	color: var(--ink);
	border-color: var(--line-strong);
}
.btn-light:hover, .btn-secondary:hover,
.btn-light:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):hover {
	background: var(--surface-hov);
	color: var(--ink);
	border-color: var(--ink-mute);
}

/* Solid danger / success keep their semantic color */
.btn-danger,
.btn-danger:not(:disabled):not(.disabled) {
	background: var(--red);
	color: var(--bg);
	border-color: var(--red);
}
.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):hover {
	filter: brightness(1.08);
	color: var(--bg);
}
.btn-success,
.btn-success:not(:disabled):not(.disabled) {
	background: var(--green);
	color: var(--bg);
	border-color: var(--green);
}
.btn-success:hover,
.btn-success:not(:disabled):not(.disabled):hover {
	filter: brightness(1.08);
	color: var(--bg);
}

/* Sizes */
.btn-sm {
	height: 28px;
	padding: 4px 8px;
	font-size: 13px;
}
.btn-lg {
	height: 42px;
	padding: 10px 16px;
	font-size: 15px;
}

/* Button groups — keep their seams tight */
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }


/* ============================================================
   DARK-MODE OVERRIDES for vendor CSS that hardcodes whites — at end of file so it wins on cascade order.
   ============================================================ */

/* --- Form controls (inputs, textareas, selects) --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] input.form-control {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder { color: var(--ink-mute); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--accent);
	box-shadow: 0 0 0 0.2rem var(--accent-bg);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
	background-color: var(--surface-2);
	color: var(--ink-mute);
}
[data-theme="dark"] .input-group-text {
	background-color: var(--surface-2);
	color: var(--ink-soft);
	border-color: var(--line-strong);
}
[data-theme="dark"] .form-check-input {
	background-color: var(--surface);
	border-color: var(--line-strong);
}
[data-theme="dark"] .form-check-input:checked {
	background-color: var(--accent);
	border-color: var(--accent);
}
[data-theme="dark"] .form-label,
[data-theme="dark"] label { color: var(--ink); }
/* Bump form-caption utility helpers to a readable mute color in dark mode. */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-text,
[data-theme="dark"] small.form-text,
[data-theme="dark"] .form-text.text-muted { color: var(--ink-mute) !important; }
[data-theme="dark"] .text-muted strong,
[data-theme="dark"] .form-text strong { color: var(--ink-soft); }

/* --- Tom Select (used everywhere via the .form-control shim) --- */
[data-theme="dark"] .ts-wrapper .ts-control,
[data-theme="dark"] .ts-wrapper.single .ts-control,
[data-theme="dark"] .ts-wrapper.multi .ts-control {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
	box-shadow: none;
}
[data-theme="dark"] .ts-wrapper .ts-control input { color: var(--ink); }
[data-theme="dark"] .ts-wrapper .ts-control input::placeholder { color: var(--ink-mute); }
[data-theme="dark"] .ts-wrapper.focus .ts-control {
	border-color: var(--accent);
	box-shadow: 0 0 0 0.2rem var(--accent-bg);
}
[data-theme="dark"] .ts-wrapper.disabled .ts-control,
[data-theme="dark"] .ts-wrapper.disabled .ts-control * {
	background-color: var(--surface-2);
	color: var(--ink-mute);
}
[data-theme="dark"] .ts-dropdown {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .ts-dropdown .option,
[data-theme="dark"] .ts-dropdown .optgroup-header {
	background-color: transparent;
	color: var(--ink);
}
[data-theme="dark"] .ts-dropdown .active,
[data-theme="dark"] .ts-dropdown .option.active,
[data-theme="dark"] .ts-dropdown [data-selectable].active {
	background-color: var(--surface-2);
	color: var(--ink);
}
[data-theme="dark"] .ts-dropdown .selected,
[data-theme="dark"] .ts-dropdown .option.selected {
	background-color: var(--accent-bg);
	color: var(--ink);
}
[data-theme="dark"] .ts-dropdown .no-results { color: var(--ink-mute); }
[data-theme="dark"] .ts-wrapper.multi .ts-control > .item {
	background-color: var(--surface-2);
	color: var(--ink);
	border-color: var(--line-strong);
}
[data-theme="dark"] .ts-wrapper.plugin-remove_button .item .remove {
	border-left-color: var(--line);
	color: var(--ink-mute);
}

/* --- Bootstrap dropdown / modal / card surfaces --- */
[data-theme="dark"] .dropdown-menu {
	background-color: var(--surface);
	border-color: var(--line-strong);
	color: var(--ink);
}
[data-theme="dark"] .dropdown-item { color: var(--ink); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
	background-color: var(--surface-2);
	color: var(--ink);
}
[data-theme="dark"] .dropdown-divider { border-top-color: var(--line); }
[data-theme="dark"] .modal-content {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--line); }
[data-theme="dark"] .card {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--line);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
	background-color: var(--surface-2);
	color: var(--ink);
	border-color: var(--line);
}
[data-theme="dark"] .bg-light { background-color: var(--surface-2) !important; color: var(--ink); }

/* --- Bootstrap list groups --- theme --bs-list-group-* vars in dark mode (default bg is #fff → white bars). */
[data-theme="dark"] .list-group {
	--bs-list-group-bg: var(--surface);
	--bs-list-group-color: var(--ink);
	--bs-list-group-border-color: var(--line);
	--bs-list-group-action-color: var(--ink);
	--bs-list-group-action-hover-bg: var(--surface-2);
	--bs-list-group-action-hover-color: var(--ink);
	--bs-list-group-action-active-bg: var(--surface-2);
	--bs-list-group-action-active-color: var(--ink);
}
[data-theme="dark"] .list-group-item {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--line);
}

/* DataTables RowGroup headers (tr.group) get an inline teal colour
   (style="color:#075f88") from the grouping JS — fine on white, but only
   ~2.6 contrast on the dark surface, so the category titles were barely
   readable. Lift to the themed accent (readable light-blue in dark). The
   colour is inline, so !important is required. Applies to every grouped
   DataTable app-wide. */
[data-theme="dark"] tr.group > td,
[data-theme="dark"] tr.group > td strong {
	color: var(--accent) !important;
}

/* --- Bootstrap tables --- */
[data-theme="dark"] .table {
	color: var(--ink);
	--bs-table-bg: var(--surface);
	--bs-table-color: var(--ink);
	/* pin BS5's striped/active/hover row color vars to --ink (else they fall back to near-black on the dark surface) */
	--bs-table-striped-color: var(--ink);
	--bs-table-active-color: var(--ink);
	--bs-table-hover-color: var(--ink);
	--bs-table-border-color: var(--line);
	--bs-table-striped-bg: var(--surface-2);
	--bs-table-hover-bg: var(--surface-hov);
}
[data-theme="dark"] .table > thead {
	color: var(--ink-mute);
	background-color: var(--surface-2);
}

/* --- DataTables wrapper / pagination --- */
[data-theme="dark"] .dataTables_wrapper { color: var(--ink); }
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
	color: var(--ink-mute);
}
[data-theme="dark"] .dataTables_wrapper .page-link {
	background-color: var(--surface);
	color: var(--ink-soft);
	border-color: var(--line-strong);
}
[data-theme="dark"] .dataTables_wrapper .page-link:hover {
	background-color: var(--surface-2);
	color: var(--ink);
}
[data-theme="dark"] .dataTables_wrapper .page-item.active .page-link {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--bg);
}
[data-theme="dark"] .dataTables_wrapper .page-item.disabled .page-link {
	background-color: var(--surface);
	color: var(--ink-faint);
	border-color: var(--line);
}


/* ============================================================
   USER TEXT-SIZE — chrome scaling overrides (at end of file to win the cascade over the earlier sidebar/actionbar rules).
   ============================================================ */
.sb-item { font-size: calc(14px * var(--fs-scale, 1)); }
.sb-section-head { font-size: calc(11px * var(--fs-scale, 1)); }
.sb-search input { font-size: calc(13px * var(--fs-scale, 1)); }
.sb-brand-mark .name { font-size: calc(14px * var(--fs-scale, 1)); }
.sb-brand-mark .sub { font-size: calc(11px * var(--fs-scale, 1)); }
.crumbs { font-size: calc(13px * var(--fs-scale, 1)); }
.crumbs .current { font-size: calc(13px * var(--fs-scale, 1)); }
.top-user .name { font-size: calc(13px * var(--fs-scale, 1)); }
.top-user .name-sub { font-size: calc(11px * var(--fs-scale, 1)); }
.modal-content { font-size: calc(14px * var(--fs-scale, 1)); }
.dropdown-menu { font-size: calc(14px * var(--fs-scale, 1)); }
.dropdown-item { font-size: calc(14px * var(--fs-scale, 1)); }

/* Clamp long-labeled dropdown menus to the viewport so they don't clip off the edge (items wrap as needed). */
.dropdown-menu {
	max-width: calc(100vw - 1rem);
	min-width: min(260px, calc(100vw - 1rem));
}
.dropdown-menu .dropdown-item {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Command palette (⌘K) — scale all the text inside the popup too. */
.cmdk-search input { font-size: calc(16px * var(--fs-scale, 1)); }
.cmdk-group-head { font-size: calc(11px * var(--fs-scale, 1)); }
.cmdk-item .label { font-size: calc(14px * var(--fs-scale, 1)); }
.cmdk-item .sub { font-size: calc(12px * var(--fs-scale, 1)); }
.cmdk-item .kbd,
.cmdk-foot,
.cmdk-foot .item,
.cmdk-foot .kbd { font-size: calc(11px * var(--fs-scale, 1)); }
.cmdk-empty { font-size: calc(13px * var(--fs-scale, 1)); }


/* ============================================================
   ACCENT COLOR variants — from <html data-accent="..."> (pre-paint script). Each defines --accent / --accent-hov / --accent-bg, paired with [data-theme="dark"].
   ============================================================ */

/* Default / no data-accent set = blue (matches the original :root tokens). */

/* Red */
html[data-accent="red"] {
	--accent: #DC2626; --accent-hov: #B91C1C; --accent-bg: #FEE2E2;
}
[data-theme="dark"] html[data-accent="red"],
html[data-accent="red"][data-theme="dark"],
[data-theme="dark"][data-accent="red"] {
	--accent: #F87171; --accent-hov: #FCA5A5; --accent-bg: rgba(248, 113, 113, 0.14);
}

/* Green */
html[data-accent="green"] {
	--accent: #16A34A; --accent-hov: #15803D; --accent-bg: #DCFCE7;
}
[data-theme="dark"][data-accent="green"] {
	--accent: #4ADE80; --accent-hov: #86EFAC; --accent-bg: rgba(74, 222, 128, 0.14);
}

/* Purple */
html[data-accent="purple"] {
	--accent: #9333EA; --accent-hov: #7E22CE; --accent-bg: #F3E8FF;
}
[data-theme="dark"][data-accent="purple"] {
	--accent: #C084FC; --accent-hov: #D8B4FE; --accent-bg: rgba(192, 132, 252, 0.14);
}

/* Orange */
html[data-accent="orange"] {
	--accent: #EA580C; --accent-hov: #C2410C; --accent-bg: #FFEDD5;
}
[data-theme="dark"][data-accent="orange"] {
	--accent: #FB923C; --accent-hov: #FDBA74; --accent-bg: rgba(251, 146, 60, 0.14);
}

/* Slate (muted neutral — for users who don't want a colored accent at all) */
html[data-accent="slate"] {
	--accent: #475569; --accent-hov: #334155; --accent-bg: #F1F5F9;
}
[data-theme="dark"][data-accent="slate"] {
	--accent: #94A3B8; --accent-hov: #CBD5E1; --accent-bg: rgba(148, 163, 184, 0.14);
}

/* RGB tuples for each accent — Bootstrap needs the channels split out for rgba() shadows/tints. */
:root,
html[data-accent="blue"] { --accent-rgb: 37, 99, 235; }
[data-theme="dark"],
[data-theme="dark"][data-accent="blue"] { --accent-rgb: 96, 165, 250; }
html[data-accent="red"]    { --accent-rgb: 220, 38, 38; }
[data-theme="dark"][data-accent="red"]    { --accent-rgb: 248, 113, 113; }
html[data-accent="green"]  { --accent-rgb: 22, 163, 74; }
[data-theme="dark"][data-accent="green"]  { --accent-rgb: 74, 222, 128; }
html[data-accent="purple"] { --accent-rgb: 147, 51, 234; }
[data-theme="dark"][data-accent="purple"] { --accent-rgb: 192, 132, 252; }
html[data-accent="orange"] { --accent-rgb: 234, 88, 12; }
[data-theme="dark"][data-accent="orange"] { --accent-rgb: 251, 146, 60; }
html[data-accent="slate"]  { --accent-rgb: 71, 85, 105; }
[data-theme="dark"][data-accent="slate"]  { --accent-rgb: 148, 163, 184; }

/* Pipe --accent into Bootstrap's --bs-primary chain so every BS default follows the accent (solid .btn-primary uses --inv-bg). */
:root {
	--bs-primary: var(--accent);
	--bs-primary-rgb: var(--accent-rgb);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: var(--accent-hov);
	--bs-link-color-rgb: var(--accent-rgb);
	--bs-link-hover-color-rgb: var(--accent-rgb);
}

/* Form-control focus uses --bs-primary border + --bs-primary tint shadow */
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
}

/* Anchor / link color */
a { color: var(--accent); }
a:hover { color: var(--accent-hov); }

/* DataTables pagination — active page picks up the accent */
.dataTables_wrapper .page-item.active .page-link {
	background-color: var(--accent);
	border-color: var(--accent);
	color: white;
}
.dataTables_wrapper .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25); }

/* Tom Select dropdown selected/active highlights */
.ts-dropdown .selected,
.ts-dropdown .option.selected { background: var(--accent-bg) !important; color: var(--accent) !important; }

/* "Nothing selected" reset row in Tom Select dropdowns — style the empty option as a muted reset, not an accent-tinted selection. */
.ts-dropdown .option .ts-empty-option,
.ts-dropdown .option.selected .ts-empty-option {
	color: var(--ink-mute);
	font-style: italic;
}
.ts-dropdown .option.selected:has(.ts-empty-option) {
	background: var(--surface-2) !important;
	color: var(--ink-mute) !important;
}
.ts-dropdown .option:has(.ts-empty-option) {
	border-bottom: 1px solid var(--line);
	padding-top: 6px;
	padding-bottom: 6px;
}
/* Render the "Nothing selected" control item like a placeholder (muted, italic). */
.ts-wrapper.single .ts-control .ts-empty-item {
	color: var(--ink-mute);
	font-style: italic;
}

/* Bootstrap utility classes used in templates */
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }

/* Active state in nav-pills / nav-tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--accent); }
.nav-tabs .nav-link.active { border-bottom-color: var(--accent); color: var(--accent); }

/* Active sidebar item underline already uses --accent — sb-item.active::before */


/* ============================================================
   ACCENT COLOR PICKER (in the user-chip dropdown)
   ============================================================ */
.accent-picker-wrapper { padding: 6px 14px 10px; }
.accent-picker {
	display: flex;
	gap: 8px;
	align-items: center;
}
.accent-picker button {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid transparent;
	background: var(--swatch, #2563EB);
	cursor: pointer;
	padding: 0;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	box-sizing: border-box;
	position: relative;
}
.accent-picker button:hover { transform: scale(1.1); }
.accent-picker button.active {
	border-color: var(--ink);
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--swatch);
}
.accent-picker button.active::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--swatch);
}


/* ============================================================
   PRE-BAKED PALETTES — pick bg + ink token bundles together.
   Read from <html data-palette="..."> set by the pre-paint script.
   Each variant has light + dark mode pairs so combinations stay
   readable regardless of [data-theme].
   ============================================================ */

/* --- Soft (light): off-white background, gray-800 text ------------- */
html[data-palette="soft"] {
	--bg:           #F8F8F6;
	--surface:      #FCFCFA;
	--surface-2:    #F2F1ED;
	--surface-hov:  #ECEBE5;
	--surface-sb:   #EDECE6;
	--ink:          #1F1F1F;
	--ink-soft:     #404040;
	--ink-mute:     #737373;
	--ink-faint:    #A3A3A3;
	--line:         #E5E4DD;
	--line-strong:  #C8C6BD;
}
[data-theme="dark"][data-palette="soft"] {
	--bg:           #1C1C1A;
	--surface:      #232320;
	--surface-2:    #2A2A26;
	--surface-hov:  #2F2F2A;
	--surface-sb:   #18181A;
	--ink:          #F4F4F0;
	--ink-soft:     #D4D4D0;
	--ink-mute:     #A3A39E;
	--ink-faint:    #737370;
	--line:         #2F2D2A;
	--line-strong:  #45413D;
}

/* --- Warm (light): cream paper, warm-brown text ------------------- */
html[data-palette="warm"] {
	--bg:           #FAF6F0;
	--surface:      #FEFCF7;
	--surface-2:    #F3EBE0;
	--surface-hov:  #EDE3D2;
	--surface-sb:   #ECE3D2;
	--ink:          #3D2E1F;
	--ink-soft:     #5C4632;
	--ink-mute:     #8A7556;
	--ink-faint:    #B5A488;
	--line:         #E5D8C5;
	--line-strong:  #C8B89E;
}
[data-theme="dark"][data-palette="warm"] {
	--bg:           #1F1A14;
	--surface:      #2A231C;
	--surface-2:    #332A21;
	--surface-hov:  #3A3025;
	--surface-sb:   #1A150F;
	--ink:          #F3E9D8;
	--ink-soft:     #DCC9AC;
	--ink-mute:     #A3947A;
	--ink-faint:    #756A55;
	--line:         #3D3225;
	--line-strong:  #574832;
}

/* --- Cool (light): bluish-gray neutral ---------------------------- */
html[data-palette="cool"] {
	--bg:           #F4F6F9;
	--surface:      #FBFCFE;
	--surface-2:    #E9EDF3;
	--surface-hov:  #DEE4ED;
	--surface-sb:   #E2E7EE;
	--ink:          #1A2233;
	--ink-soft:     #2E3D55;
	--ink-mute:     #5A6B85;
	--ink-faint:    #94A0B5;
	--line:         #D8DEE8;
	--line-strong:  #B4BECD;
}
[data-theme="dark"][data-palette="cool"] {
	--bg:           #0C1220;
	--surface:      #131A2A;
	--surface-2:    #1B2333;
	--surface-hov:  #212A3D;
	--surface-sb:   #090E1A;
	--ink:          #E8ECF5;
	--ink-soft:     #C8D0E0;
	--ink-mute:     #8F9BB3;
	--ink-faint:    #5D6A80;
	--line:         #1F2A40;
	--line-strong:  #2F3E5C;
}

/* --- Sepia (light): book-reader, paper background ---------------- */
html[data-palette="sepia"] {
	--bg:           #F6F0E1;
	--surface:      #FBF7EC;
	--surface-2:    #EDE3CD;
	--surface-hov:  #E6D9BB;
	--surface-sb:   #E8DDC1;
	--ink:          #4A3A22;
	--ink-soft:     #6B5238;
	--ink-mute:     #948163;
	--ink-faint:    #BFB29B;
	--line:         #DCCFA8;
	--line-strong:  #BFA97C;
}
/* Sepia dark reuses the warm-dark bundle (closest paper-on-dark feel). */
[data-theme="dark"][data-palette="sepia"] {
	--bg:           #1F1A14;
	--surface:      #2A231C;
	--surface-2:    #332A21;
	--surface-hov:  #3A3025;
	--surface-sb:   #1A150F;
	--ink:          #F3E9D8;
	--ink-soft:     #DCC9AC;
	--ink-mute:     #A3947A;
	--ink-faint:    #756A55;
	--line:         #3D3225;
	--line-strong:  #574832;
}

/* --- High contrast (light): pure white / pure black -------------- */
html[data-palette="contrast"] {
	--bg:           #FFFFFF;
	--surface:      #FFFFFF;
	--surface-2:    #F0F0F0;
	--surface-hov:  #E5E5E5;
	--surface-sb:   #F5F5F5;
	--ink:          #000000;
	--ink-soft:     #1A1A1A;
	--ink-mute:     #4A4A4A;
	--ink-faint:    #6E6E6E;
	--line:         #BFBFBF;
	--line-strong:  #8A8A8A;
}
[data-theme="dark"][data-palette="contrast"] {
	--bg:           #000000;
	--surface:      #0A0A0A;
	--surface-2:    #1A1A1A;
	--surface-hov:  #2A2A2A;
	--surface-sb:   #050505;
	--ink:          #FFFFFF;
	--ink-soft:     #F0F0F0;
	--ink-mute:     #C0C0C0;
	--ink-faint:    #909090;
	--line:         #404040;
	--line-strong:  #6A6A6A;
}


/* ============================================================
   PALETTE PICKER (in the user-chip dropdown)
   ============================================================ */
.palette-picker-wrapper { padding: 6px 14px 10px; }
.palette-picker {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.palette-picker button {
	width: 36px;
	height: 28px;
	background: var(--bg-preview, #FAFAFA);
	color: var(--ink-preview, #09090B);
	border: 1px solid var(--line);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	letter-spacing: -0.01em;
}
.palette-picker button:hover { transform: translateY(-1px); }
.palette-picker button.active {
	box-shadow: 0 0 0 2px var(--accent);
	border-color: var(--accent);
}


/* ============================================================
   PRIMARY-BUTTON STYLE OVERRIDES — switch on html[data-btn-style] (default "neutral" in the main .btn block above).
   ============================================================ */

/* === Accent: solid fill in the chosen accent color === */
html[data-btn-style="accent"] .btn-primary,
html[data-btn-style="accent"] .btn-primary:not(:disabled):not(.disabled) {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
}
html[data-btn-style="accent"] .btn-primary:hover,
html[data-btn-style="accent"] .btn-primary:focus,
html[data-btn-style="accent"] .btn-primary:not(:disabled):not(.disabled):hover,
html[data-btn-style="accent"] .btn-primary:not(:disabled):not(.disabled):focus,
html[data-btn-style="accent"] .btn-primary:not(:disabled):not(.disabled):active {
	background: var(--accent-hov);
	color: white;
	border-color: var(--accent-hov);
}
html[data-btn-style="accent"] .btn-outline-primary {
	background: var(--surface);
	color: var(--accent);
	border-color: var(--accent);
}
html[data-btn-style="accent"] .btn-outline-primary:hover,
html[data-btn-style="accent"] .btn-outline-primary:not(:disabled):not(.disabled):hover {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
}

/* === Outline: primary becomes accent-bordered with accent text === */
html[data-btn-style="outline"] .btn-primary,
html[data-btn-style="outline"] .btn-primary:not(:disabled):not(.disabled) {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}
html[data-btn-style="outline"] .btn-primary:hover,
html[data-btn-style="outline"] .btn-primary:focus,
html[data-btn-style="outline"] .btn-primary:not(:disabled):not(.disabled):hover,
html[data-btn-style="outline"] .btn-primary:not(:disabled):not(.disabled):focus,
html[data-btn-style="outline"] .btn-primary:not(:disabled):not(.disabled):active {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
}
html[data-btn-style="outline"] .btn-outline-primary {
	background: var(--surface);
	color: var(--accent);
	border-color: var(--accent);
}


/* ============================================================
   BUTTON-STYLE PICKER (in the user-chip dropdown)
   Each preview button is rendered in the style it would set.
   ============================================================ */
.btn-style-picker-wrapper { padding: 6px 14px 8px; }
.btn-style-picker {
	display: flex;
	gap: 6px;
}
.btn-style-picker .bsp-preview {
	flex: 1;
	height: 28px;
	font-size: 11px;
	font-weight: 500;
	border-radius: var(--r-sm);
	cursor: pointer;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.1s ease, opacity 0.1s ease;
	box-sizing: border-box;
}
.btn-style-picker .bsp-preview:hover { transform: translateY(-1px); }
.btn-style-picker .bsp-preview.active {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-mute);
}
.btn-style-picker .bsp-neutral {
	background: var(--inv-bg);
	color: var(--inv-fg);
	border: 1px solid var(--inv-bg);
}
.btn-style-picker .bsp-accent {
	background: var(--accent);
	color: white;
	border: 1px solid var(--accent);
}
.btn-style-picker .bsp-outline {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--accent);
}


/* ============================================================
   APPEARANCE RESET BUTTON (in the user-chip dropdown)
   ============================================================ */
.appearance-reset-wrapper {
	padding: 4px 14px 8px;
}
.appearance-reset {
	background: transparent;
	border: none;
	color: var(--ink-mute);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.1s ease;
}
.appearance-reset:hover { color: var(--ink); }
.appearance-reset svg { flex-shrink: 0; opacity: 0.7; }
.appearance-reset:hover svg { opacity: 1; }


/* ============================================================================
   BS4 → BS5 utility class shims — alias the BS4 directional names still emitted by legacy templates.
   ============================================================================ */
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }


/* ============================================================================
   NATIVE <select> styling — for `.no-ts` selects (opted out of Tom Select). SVG chevron for cross-platform consistency.
   ============================================================================ */
select.no-ts.form-control,
select.form-control.no-ts {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 13px 13px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 6px 30px 6px 12px;
	height: auto;
	min-height: 36px;
	color: var(--ink);
	font-size: calc(13.5px * var(--fs-scale, 1));
	cursor: pointer;
}
/* Empty-value/placeholder state — muted+italic (cloud.js initSelects injects "Nothing selected" text). */
select.no-ts.form-control:has(option[value=""]:checked),
select.form-control.no-ts:has(option[value=""]:checked) {
	color: var(--ink-mute);
	font-style: italic;
}
/* Reset the options to normal style so they don't inherit the select's placeholder italic/muted. */
select.no-ts.form-control option,
select.form-control.no-ts option {
	color: var(--ink);
	font-style: normal;
}
/* Keep the "Nothing selected" option itself italic+muted as the reset row. */
select.no-ts.form-control option[value=""],
select.form-control.no-ts option[value=""] {
	color: var(--ink-mute);
	font-style: italic;
}
select.no-ts.form-control:focus,
select.form-control.no-ts:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-bg);
}
select.no-ts.form-control:hover:not(:focus),
select.form-control.no-ts:hover:not(:focus) {
	background-color: var(--surface-2);
}
[data-theme="dark"] select.no-ts.form-control,
[data-theme="dark"] select.form-control.no-ts {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}


/* ============================================================================
   /units/editor.php — tablet + phone responsive
   ============================================================================
   The editor form uses a 2-col layout (left = Unit details, right =
   Billing Information + Store Credit) via `<div class="row"><div
   class="col">…</div><div class="col">…</div></div>` — plain `.col`
   (no col-sm-N modifier) which means equal 50/50 at EVERY viewport.
   On tablets (576-991px) that leaves each side at ~280-470px wide and
   the inputs feel cramped. Stack the two cols all the way up to 992px.
   The 767.98px block above already handles section-header floats and
   #editorHeader button stacking for phones; this block extends just the
   two-column stacking to the tablet range. */
@media (min-width: 768px) and (max-width: 991.98px) {
	body.page-units-editor #myForm > .row > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}
	/* Section header floats also need to stack at tablet — without this
	   the "New Production" / "New Manager" buttons collide with the h2
	   title because both still float. */
	body.page-units-editor h2.float-start,
	body.page-units-editor h2.float-left {
		float: none !important;
		display: block;
		width: 100%;
	}
	body.page-units-editor .float-end,
	body.page-units-editor .float-right {
		float: none !important;
		display: block;
		margin-bottom: 0.75rem;
	}
}


/* ============================================================================
   SEARCH CARD — RESPONSIVE
   ============================================================================
   The list pages (/units, /people, /events filtering, /scheduling/expenses,
   etc.) all use a `<div class="card bg-light"><div class="card-body"><div
   class="row">` filter pane with Bootstrap cols like col-sm-4 / -3 / -3 / -2.
   Those cols collapse to full-width only below 576px (Bootstrap's `sm`
   breakpoint), which leaves the awkward 576-991px range with labels
   crammed into 25%-width columns ("Min Performers (requires season
   selection)" wrapping over 4-5 lines next to a sibling "Max Performers"
   doing the same).
   Force the filter rows to stack at every breakpoint below `lg` (992px)
   and also stack the nested Min/Max performer columns so the inputs
   become full-width instead of crammed half-width. */
@media (max-width: 991.98px) {
	.card.bg-light > .card-body > .row > [class*="col-sm-"],
	.card.bg-light > .card-body > .row > [class*="col-md-"],
	.card.bg-light > .card-body > .row > [class*="col-lg-"]:not(.col-lg-12) {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	/* Nested rows (Min/Max performers on /units/) also stack. */
	.card.bg-light .card-body .row > [class*="col-sm-"] .row > [class*="col-sm-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	/* Search button column: full-width button so it doesn't sit lonely
	   in a tiny right-aligned slot. */
	.card.bg-light .searchButtonWrapper {
		display: flex;
		justify-content: stretch;
		margin-top: 8px;
	}
	.card.bg-light .searchButtonWrapper .btn {
		flex: 1 1 auto;
		min-height: 40px;
	}
	/* Tighten internal spacing — at narrow widths the card-body's
	   default padding eats half the screen. */
	.card.bg-light > .card-body {
		padding: 14px 16px;
	}
}

/* Very small phones: tighter spacing + drop the bg-light card chrome
   slightly so the form reads as a single visual unit. */
@media (max-width: 575.98px) {
	.card.bg-light > .card-body {
		padding: 12px;
	}
	.card.bg-light > .card-body > .row {
		row-gap: 4px;
	}
	.card.bg-light .mb-3 {
		margin-bottom: 0.5rem !important;
	}
	/* Tom Select / form-control inputs reach the card edges */
	.card.bg-light .form-control,
	.card.bg-light .ts-wrapper {
		width: 100%;
	}
}


/* ============================================================
   Print safety net — hide the app-shell chrome (.sidebar / .actionbar / footer) and collapse the grid for print.
   ============================================================ */
@media print {
	.sidebar,
	.actionbar,
	footer { display: none !important; }
	.shell { display: block !important; }
	main, .main { padding: 0 !important; }
	body { padding: 0 !important; }
}


/* App-wide autofill fix: mask WebKit's theme-ignoring yellow autofill bg with an inset shadow + themed ink. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
	box-shadow: 0 0 0 1000px var(--surface) inset;
	caret-color: var(--ink);
	transition: background-color 9999s ease-in-out 0s;
}

/* ============================================================
   Auth pages — split-screen layout keyed on `.auth`: dark brand panel (left, hidden on mobile) + themed form panel (right).
   ============================================================ */
body:has(main.auth) {
	padding-bottom: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
}
main.auth {
	flex: 1 1 auto;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
}

/* ---- Left: brand panel ---- */
main.auth .auth-brand {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 64px 72px;
	color: #fff;
	background:
		radial-gradient(125% 95% at 12% 8%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 58%),
		radial-gradient(90% 80% at 92% 102%, rgba(99, 102, 241, 0.30), transparent 55%),
		linear-gradient(150deg, #0b1020 0%, #11162a 55%, #0a0e1c 100%);
}
/* faint marching-field hash lines */
main.auth .auth-brand::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px);
	pointer-events: none;
}
main.auth .auth-brand-inner { position: relative; z-index: 1; max-width: 440px; }
main.auth .auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; }
main.auth .auth-logo-mark {
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.20);
	font-weight: 700; font-size: 21px;
}
main.auth .auth-logo-word { font-weight: 700; font-size: 22px; letter-spacing: 0.02em; }
main.auth .auth-headline {
	margin: 0 0 18px;
	font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -0.025em;
}
main.auth .auth-sub {
	margin: 0; max-width: 380px;
	font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72);
}
main.auth .auth-brand-foot {
	position: absolute; left: 72px; bottom: 48px; z-index: 1;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

/* ---- Right: form panel ---- */
main.auth .auth-panel {
	display: flex; align-items: center; justify-content: center;
	padding: 40px 28px;
	background: var(--surface);
}
main.auth .auth-card { width: 100%; max-width: 380px; }
main.auth .auth-card-head h2 {
	margin: 0 0 6px;
	font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
main.auth .auth-card-head p { margin: 0 0 24px; font-size: 14px; color: var(--ink-mute); }
main.auth .auth-admins-note {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 22px; padding: 9px 12px;
	font-size: 12.5px; color: var(--ink-soft);
	background: var(--accent-bg);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}
main.auth .auth-admins-note i { color: var(--accent); }
.auth-field { margin-bottom: 16px; }
.auth-field > label {
	display: block; margin: 0 0 6px;
	font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
/* Unified field — icon prefix + input + eye toggle read as one control (single border/radius/focus ring on the group). */
.auth-field .input-group {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth-field .input-group:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.auth-field .input-group:has(.form-control.is-invalid) {
	border-color: var(--red);
}
.auth-field .input-group:has(.form-control.is-invalid):focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}
/* Reflect the token-reset page's .has-error / .has-success on the unified group border. */
.auth-field.has-error .input-group { border-color: var(--red); }
.auth-field.has-success .input-group { border-color: var(--state-success-text); }
/* Strip per-segment chrome so the .input-group children sit flush (plain .auth-field inputs keep their border). */
.auth-field .input-group-text,
.auth-field .input-group .form-control,
.auth-field .auth-eye {
	border: 0;
	background: transparent;
	box-shadow: none;
}
.auth-field .input-group-text { color: var(--ink-mute); padding: 0 6px 0 13px; }
.auth-field .input-group .form-control { padding: 10px 6px; }
.auth-field .input-group .form-control:focus { box-shadow: none; }
/* Drop BS5's in-field validation glyph — the group border + message carry the state. */
.auth-field .input-group .form-control.is-invalid,
.auth-field .input-group .form-control.is-valid {
	background-image: none;
	padding-right: 6px;
}
/* Mask WebKit autofill bg; high specificity to beat the box-shadow:none strip above. */
.auth-field .input-group .form-control:-webkit-autofill,
.auth-field .input-group .form-control:-webkit-autofill:hover,
.auth-field .input-group .form-control:-webkit-autofill:focus,
.auth-field .input-group .form-control:-webkit-autofill:active {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
	box-shadow: 0 0 0 1000px var(--surface) inset;
	caret-color: var(--ink);
	transition: background-color 9999s ease-in-out 0s;
}
.auth-field .auth-eye {
	display: flex; align-items: center; justify-content: center;
	align-self: center;   /* the .btn doesn't stretch like .input-group-text; center it on the field axis */
	color: var(--ink-mute); padding: 0 13px; line-height: 1;
}
.auth-field .auth-eye:hover { color: var(--ink); background: transparent; }
/* keep the left icon glyphs centered on the same axis as the input text + eye */
.auth-field .input-group-text {
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.auth-field .invalid-feedback { display: block; margin-top: 6px; }
main.auth .auth-row {
	display: flex; align-items: center; justify-content: space-between;
	margin: 2px 0 22px;
}
main.auth .auth-row .form-check { margin: 0; }
main.auth .auth-forgot { font-size: 13px; color: var(--accent); text-decoration: none; }
main.auth .auth-forgot:hover { text-decoration: underline; }
main.auth .auth-submit { width: 100%; padding: 11px 16px; font-weight: 600; }
main.auth .auth-alt { margin: 18px 0 0; text-align: center; font-size: 13px; }
main.auth .auth-alt a { color: var(--accent); text-decoration: none; }
main.auth .auth-alt a:hover { text-decoration: underline; }

@media (max-width: 860px) {
	main.auth { grid-template-columns: 1fr; }
	main.auth .auth-brand { display: none; }
	main.auth .auth-panel { padding: 48px 22px; }
}

/* Dark mode: soft accent glow on the panel + elevated (surface-2) fields so they don't read as a flat black slab. */
[data-theme="dark"] main.auth .auth-panel {
	background:
		radial-gradient(135% 80% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
		radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
		var(--surface);
}
[data-theme="dark"] main.auth .auth-card-head h2 { color: #fff; }
[data-theme="dark"] main.auth .auth-field .input-group {
	background: var(--surface-2);
}
[data-theme="dark"] main.auth .auth-field .input-group:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* autofill mask must match the elevated field fill in dark */
[data-theme="dark"] main.auth .auth-field .input-group .form-control:-webkit-autofill,
[data-theme="dark"] main.auth .auth-field .input-group .form-control:-webkit-autofill:hover,
[data-theme="dark"] main.auth .auth-field .input-group .form-control:-webkit-autofill:focus,
[data-theme="dark"] main.auth .auth-field .input-group .form-control:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
	box-shadow: 0 0 0 1000px var(--surface-2) inset;
}