/*
 * GEN-306 Admin UI v2 - components (sec. 7 of the brief).
 *
 * The markup across ~1,100 pages uses Bootstrap 3 / DashLite classes, so most of this file maps
 * those legacy classes onto the v2 components rather than asking every page for new classes.
 * Selectors start with .v2 (the body class) so they outrank the legacy single-class rules in
 * style.min.css, including its :hover / :not(:disabled):active variants. Uses tokens.css only.
 */

/* ======================================================================== Buttons (7.1) */
.v2 .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	height: var(--control-h);
	padding: 0 14px;
	border: 1px solid var(--c-border-input);
	border-radius: var(--r-md);
	background: var(--c-surface);
	color: var(--c-text);
	font: var(--fw-medium) var(--fs-14)/1 var(--font-sans);
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	box-shadow: none;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.v2 .btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: none; }
.v2 .btn .icon, .v2 .btn .fa { font-size: var(--fs-16); }
.v2 .btn.btn-block, .v2 .btn-block { display: flex; width: 100%; }
.v2 .btn.btn-sm, .v2 .btn.btn-xs { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-13); }
.v2 .btn.btn-lg { height: 40px; padding: 0 var(--sp-5); font-size: var(--fs-14); }

/* The GEN-274 button set in style.min.css paints every variant with !important (colour, background,
   border colour), so the v2 variants below need !important on those three to win. */
/* Secondary (default for every legacy neutral / outline / dim / yellow / navy variant) */
.v2 .btn.btn-secondary, .v2 .btn.btn-default, .v2 .btn.btn-white, .v2 .btn.btn-light,
.v2 .btn.btn-outline-light, .v2 .btn.btn-outline-secondary, .v2 .btn.btn-outline-dark, .v2 .btn.btn-outline-gray,
.v2 .btn.btn-outline-info, .v2 .btn.btn-info, .v2 .btn.btn-inverse, .v2 .btn.btn-send, .v2 .btn.btn-bank,
.v2 .btn.btn-soft, .v2 .btn.btn-dim, .v2 .btn.btn-warning, .v2 .btn.btn-outline-warning, .v2 .btn.btn-outline-primary,
.v2 .btn.btn-dark, .v2 .btn.btn-gray, .v2 .btn.btn-outline-success {
	background: var(--c-surface) !important;
	border-color: var(--c-border-input) !important;
	color: var(--c-text) !important;
}
.v2 .btn.btn-secondary:hover, .v2 .btn.btn-default:hover, .v2 .btn.btn-white:hover, .v2 .btn.btn-light:hover,
.v2 .btn.btn-outline-light:hover, .v2 .btn.btn-outline-secondary:hover, .v2 .btn.btn-outline-dark:hover, .v2 .btn.btn-outline-gray:hover,
.v2 .btn.btn-outline-info:hover, .v2 .btn.btn-info:hover, .v2 .btn.btn-inverse:hover, .v2 .btn.btn-send:hover, .v2 .btn.btn-bank:hover,
.v2 .btn.btn-soft:hover, .v2 .btn.btn-dim:hover, .v2 .btn.btn-warning:hover, .v2 .btn.btn-outline-warning:hover, .v2 .btn.btn-outline-primary:hover,
.v2 .btn.btn-dark:hover, .v2 .btn.btn-gray:hover, .v2 .btn.btn-outline-success:hover,
.v2 .btn.btn-secondary:focus, .v2 .btn.btn-outline-light:focus, .v2 .btn.btn-dim:focus,
.v2 .btn.btn-secondary:active, .v2 .btn.btn-outline-light:active, .v2 .btn.btn-dim:active {
	background: var(--c-surface-2) !important;
	border-color: var(--c-border-hover) !important;
	color: var(--c-text) !important;
}

/* Primary: commit actions (Save, Search, Add) */
.v2 .btn.btn-primary, .v2 .btn.btn-outline-primary-inverse, .v2 .btn.btn-outline-light-inverse,
.v2 .btn.btn-search, .v2 .btn.btn-success, .v2 .btn.btn-dim.btn-primary, .v2 .btn.btn-dim.btn-outline-primary-inverse,
.v2 .btn.btn-dim.btn-outline-light-inverse, .v2 .btn.btn-dim.btn-success {
	background: var(--c-accent) !important;
	border-color: var(--c-accent) !important;
	color: var(--c-on-accent) !important;
}
.v2 .btn.btn-primary:hover, .v2 .btn.btn-outline-primary-inverse:hover, .v2 .btn.btn-outline-light-inverse:hover,
.v2 .btn.btn-search:hover, .v2 .btn.btn-success:hover, .v2 .btn.btn-dim.btn-primary:hover, .v2 .btn.btn-dim.btn-outline-primary-inverse:hover,
.v2 .btn.btn-dim.btn-outline-light-inverse:hover, .v2 .btn.btn-dim.btn-success:hover,
.v2 .btn.btn-primary:focus, .v2 .btn.btn-primary:active, .v2 .btn.btn-outline-light-inverse:focus {
	background: var(--c-accent-hover) !important;
	border-color: var(--c-accent-hover) !important;
	color: var(--c-on-accent) !important;
}

/* Danger: destructive confirms only. Outline danger (row "Delete") is a ghost with danger text. */
.v2 .btn.btn-danger, .v2 .btn.btn-dim.btn-danger { background: var(--c-danger) !important; border-color: var(--c-danger); color: var(--c-on-accent) !important; }
.v2 .btn.btn-danger:hover, .v2 .btn.btn-dim.btn-danger:hover { background: var(--c-danger-text) !important; border-color: var(--c-danger-text); color: var(--c-on-accent) !important; }
.v2 .btn.btn-outline-danger { background: transparent !important; border-color: transparent; color: var(--c-danger-text) !important; }
.v2 .btn.btn-outline-danger:hover { background: var(--c-danger-bg) !important; border-color: transparent; color: var(--c-danger-text) !important; }

/* Ghost */
.v2 .btn.btn-link, .v2 .btn.btn-ghost, .v2 .btn.btn-trigger { background: transparent !important; border-color: transparent; color: var(--c-text-2) !important; }
.v2 .btn.btn-link:hover, .v2 .btn.btn-ghost:hover, .v2 .btn.btn-trigger:hover { background: var(--c-surface-3) !important; border-color: transparent; color: var(--c-text) !important; text-decoration: none; }

/* Disabled */
.v2 .btn:disabled, .v2 .btn.disabled, .v2 .btn[disabled], .v2 .btn.btn-disabled { opacity: .5; cursor: not-allowed; pointer-events: auto; }

/* Loading: add .is-loading (and aria-busy) to a button */
.v2 .btn.is-loading { position: relative; color: transparent !important; } /* hides the label under the spinner */
.v2 .btn.is-loading::after {
	content: "";
	position: absolute;
	width: 14px; height: 14px;
	border: 2px solid currentColor;
	border-color: var(--c-text-subtle) transparent var(--c-text-subtle) transparent;
	border-radius: 50%;
	animation: v2-spin .8s linear infinite;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* Icon button */
.v2 .btn.btn-icon { width: var(--control-h); padding: 0; }

/* Legacy float / margin helpers that GEN-274 buttons still carry */
.v2 .btn.margin-left-5 { margin-inline-start: var(--sp-2); margin-left: 0; }

/* ======================================================================== Form controls (7.2) */
.v2 .form-control,
.v2 select.form-control,
.v2 input[type="text"].form-control, .v2 input[type="password"].form-control, .v2 input[type="email"].form-control,
.v2 input[type="number"].form-control, .v2 input[type="search"].form-control, .v2 input[type="tel"].form-control {
	height: var(--control-h);
	padding: 0 10px;
	border: 1px solid var(--c-border-input);
	border-radius: var(--r-md);
	background-color: var(--c-surface);
	color: var(--c-text);
	font: var(--fw-regular) var(--fs-14)/1.4 var(--font-sans);
	box-shadow: none;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.v2 .form-control.form-control-lg { height: 40px; font-size: var(--fs-14); }
.v2 .form-control.form-control-sm, .v2 .input-sm { height: var(--control-h-sm); font-size: var(--fs-13); }
.v2 textarea.form-control, .v2 select[multiple].form-control, .v2 select[size].form-control { height: auto; min-height: 80px; padding: var(--sp-2) 10px; }
.v2 .form-control:hover { border-color: var(--c-border-hover); }
.v2 .form-control:focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-soft);
	outline: none;
}
.v2 .form-control[readonly], .v2 .form-control:disabled, .v2 .form-control[disabled] { background-color: var(--c-surface-2); color: var(--c-text-muted); }
.v2 .form-control.is-invalid, .v2 .form-control.input-validation-error, .v2 .has-error .form-control { border-color: var(--c-danger); }
.v2 .form-control::placeholder { color: var(--c-text-subtle); }

/* Field labels: legacy forms use <h4 class="resource"> above the input. */
.v2 h4.resource, .v2 .form-label, .v2 label.control-label {
	margin: 0 0 6px;
	font: var(--fw-semibold) var(--fs-13)/1.35 var(--font-sans);
	color: var(--c-text-2);
	letter-spacing: 0;
	text-transform: none;
}
.v2 .form-group { margin-bottom: var(--sp-4); }

.v2 input[type="checkbox"]:not(.custom-control-input),
.v2 input[type="radio"]:not(.custom-control-input) {
	accent-color: var(--c-accent);
	width: 17px;
	height: 17px;
	vertical-align: middle;
}

/* Toggle switch: <label class="v2-switch"><input type="checkbox"><span></span></label> */
.v2-switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.v2-switch input { position: absolute; display: block !important; opacity: 0; width: 1px; height: 1px; } /* style.min.css hides every checkbox with display:none, which also drops it from keyboard focus */
.v2-switch > span { position: relative; width: 36px; height: 20px; flex: 0 0 auto; border-radius: var(--r-pill); background: var(--c-border-input); transition: background var(--dur-fast) var(--ease); }
.v2-switch > span::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease); }
.v2-switch input:checked + span { background: var(--c-accent); }
.v2-switch input:checked + span::after { transform: translateX(16px); }
[dir="rtl"] .v2-switch input:checked + span::after { transform: translateX(-16px); }
.v2-switch input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ======================================================================== Pills / badges (7.3) */
.v2-pill,
.v2 .badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 var(--sp-2);
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-neutral-bg);
	color: var(--c-neutral-text);
	font: var(--fw-medium) var(--fs-12)/1 var(--font-sans);
	white-space: nowrap;
	vertical-align: middle;
}
.v2-pill--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }

.v2-pill--success, .v2 .badge.badge-success, .v2 .badge.badge-dim.badge-success, .v2 .badge.badge-outline-success, .v2 .label-success { background: var(--c-success-bg); color: var(--c-success-text); }
.v2-pill--warning, .v2 .badge.badge-warning, .v2 .badge.badge-dim.badge-warning, .v2 .badge.badge-outline-warning, .v2 .label-warning { background: var(--c-warning-bg); color: var(--c-warning-text); }
.v2-pill--danger, .v2 .badge.badge-danger, .v2 .badge.badge-dim.badge-danger, .v2 .badge.badge-outline-danger, .v2 .label-danger { background: var(--c-danger-bg); color: var(--c-danger-text); }
.v2-pill--info, .v2 .badge.badge-info, .v2 .badge.badge-dim.badge-info, .v2 .badge.badge-outline-info, .v2 .label-info { background: var(--c-info-bg); color: var(--c-info-text); }
.v2-pill--accent, .v2 .badge.badge-primary, .v2 .badge.badge-dim.badge-primary, .v2 .badge.badge-outline-primary, .v2 .label-primary { background: var(--c-accent-soft); color: var(--c-accent-text); }
.v2-pill--orange { background: var(--c-orange-bg); color: var(--c-orange-text); }
.v2-pill--teal { background: var(--c-teal-bg); color: var(--c-teal-text); }
.v2-pill--purple { background: var(--c-purple-bg); color: var(--c-purple-text); } /* violet/magenta legend colours, e.g. wire In progress */
.v2-pill--neutral, .v2 .badge.badge-secondary, .v2 .badge.badge-light, .v2 .badge.badge-gray, .v2 .badge.badge-dark, .v2 .badge.badge-dim.badge-secondary, .v2 .label-default { background: var(--c-neutral-bg); color: var(--c-neutral-text); }
.v2 .badge.badge-pill { border-radius: var(--r-pill); }

/* ======================================================================== Cards / panels (7.4) */
.v2 .panel,
.v2 .card.card-bordered,
.v2-card {
	background: var(--c-surface) !important; /* legacy .panel background is transparent !important */
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: none;
}
.v2 .panel > .panel-heading { background: transparent; border-bottom: 0; }
.v2 .panel > .panel-footer { background: transparent; border-top: 1px solid var(--c-border-row); }
.v2-card { padding: var(--sp-5) var(--sp-6); }
.v2-card__head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.v2-card__title { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.v2-card__desc { margin: 2px 0 0; color: var(--c-text-muted); font-size: var(--fs-14); }
.v2-card__actions { display: flex; gap: var(--sp-2); margin-inline-start: auto; }

/* ======================================================================== Empty states (7.5) */
.v2-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-8) var(--sp-4);
	text-align: center;
	color: var(--c-text-muted);
}
.v2-empty .v2-icon { width: 40px; height: 40px; color: var(--c-text-subtle); stroke-width: 1.5; }
.v2-empty__title { margin: var(--sp-1) 0 0; color: var(--c-text); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.v2-empty__hint { margin: 0; font-size: var(--fs-13); }
.v2 tr.EmptyData, .v2 tr.EmptyData td { background: transparent !important; border: 0 !important; } /* beats the legacy table chrome on the empty row */

/* ======================================================================== Alerts / callouts (7.6) */
.v2 .alert {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid transparent;
	border-radius: var(--r-alert);
	font-size: var(--fs-14);
	line-height: var(--lh-base);
	box-shadow: none;
}
/* Legacy alert backgrounds / borders are !important. */
.v2 .alert-info, .v2 .alert-primary { background: var(--c-info-bg) !important; color: var(--c-info-text); border-color: color-mix(in srgb, var(--c-info) 40%, transparent) !important; }
.v2 .alert-success { background: var(--c-success-bg) !important; color: var(--c-success-text); border-color: color-mix(in srgb, var(--c-success) 40%, transparent) !important; }
.v2 .alert-warning { background: var(--c-warning-bg) !important; color: var(--c-warning-text); border-color: color-mix(in srgb, var(--c-warning) 40%, transparent) !important; }
.v2 .alert-danger, .v2 .alert-error { background: var(--c-danger-bg) !important; color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent) !important; }
.v2 .alert a { color: inherit; text-decoration: underline; }

/* ======================================================================== Dialogs (7.7) */
.v2 .modal-content {
	border: 1px solid var(--c-border);
	border-radius: 0; /* the dialog is a full-height panel docked to the side of the window, so no rounded corners */
	background: var(--c-surface);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.v2 .modal-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.v2 .modal-header .modal-title, .v2 .modal-title { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-text); }
.v2 .modal-header .close { order: 99; margin-inline-start: auto; opacity: .6; } /* Bootstrap 3 puts the close button first in the markup; it belongs at the end */
.v2 .modal-body { padding: var(--sp-6); }
.v2 .modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.v2 .modal-backdrop, .v2 .modal-backdrop.in, .v2 .modal-backdrop.show { background: var(--c-scrim); opacity: 1; }

/* jQuery UI dialogs ($.confirm, session notices) */
.v2 .ui-dialog {
	padding: 0;
	border: 1px solid var(--c-border) !important; /* jQuery UI theme sets the border with !important */
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-sans);
	overflow: hidden;
}
.v2 .ui-dialog .ui-dialog-titlebar { padding: var(--sp-4) var(--sp-6); border: 0; border-bottom: 1px solid var(--c-border) !important; border-radius: 0; background: var(--c-surface) !important; color: var(--c-text); font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.v2 .ui-dialog .ui-dialog-content { padding: var(--sp-5) var(--sp-6); color: var(--c-text-2); font-size: var(--fs-14); }
.v2 .ui-dialog .ui-dialog-buttonpane { margin: 0; padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--c-border) !important; background: var(--c-surface-2); }
.v2 .ui-dialog .ui-dialog-buttonpane button { margin: 0 0 0 var(--sp-2); }
.v2 .ui-widget-overlay { background: var(--c-scrim); opacity: 1; }

/* Datepicker */
.v2 .ui-datepicker {
	padding: var(--sp-2);
	border: 1px solid var(--c-border) !important; /* jQuery UI theme border is !important */
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--shadow-lg);
	font: var(--fw-regular) var(--fs-14)/1.3 var(--font-sans);
	z-index: var(--z-dialog) !important; /* jQuery UI writes an inline z-index */
}
.v2 .ui-datepicker .ui-datepicker-header { border: 0; background: transparent !important; color: var(--c-text); font-weight: var(--fw-semibold); }
.v2 .ui-datepicker th { color: var(--c-text-subtle); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.v2 .ui-datepicker td a, .v2 .ui-datepicker td span { border: 0 !important; border-radius: var(--r-sm); background: transparent !important; color: var(--c-text-2); text-align: center; padding: 6px; }
.v2 .ui-datepicker td a:hover { background: var(--c-surface-3) !important; }
.v2 .ui-datepicker td .ui-state-highlight { color: var(--c-accent-text); font-weight: var(--fw-semibold); }
.v2 .ui-datepicker td .ui-state-active { background: var(--c-accent) !important; color: var(--c-on-accent); }

/* Date field: netpay:DatePicker renders <span.form-control><input.form-control></span>; the span is the field, so the inner input
   draws no second border (GEN-306 / AD-3276). */
.v2 span.form-control > input.date-picker.form-control { width: 100%; height: 100%; margin: 0; padding: 0 10px; border: 0 !important; border-radius: inherit; background: transparent; box-shadow: none; }
.v2 span.form-control > input.date-picker.form-control:focus { outline: 0; box-shadow: none; }
.v2 span.form-control:focus-within { border-color: var(--c-accent); }

/* Age message under a date-of-birth picker: Admin has no .d-none / .d-block utilities, so the message was always visible (AD-3276). */
.v2 .error.d-none { display: none !important; }
.v2 .error.d-block { display: block !important; background: var(--c-surface, #fff) !important; color: var(--c-danger, #d92d20) !important; }

/* Autocomplete */
.v2 .ui-autocomplete { padding: var(--sp-1); border: 1px solid var(--c-border) !important; border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-lg); font-size: var(--fs-14); }
.v2 .ui-autocomplete .ui-menu-item a, .v2 .ui-autocomplete .ui-menu-item-wrapper { padding: 6px var(--sp-3); border: 0 !important; border-radius: var(--r-sm); }
.v2 .ui-autocomplete .ui-state-focus, .v2 .ui-autocomplete .ui-state-active { background: var(--c-accent-soft) !important; color: var(--c-accent-text); margin: 0; }

/* ======================================================================== Pagination */
.v2 ul.pagination {
	display: inline-flex;
	gap: var(--sp-1);
	margin: 0 !important; /* Pager.cs writes margin-left:35% inline */
	padding: 0;
}
.v2 ul.pagination > li > a, .v2 ul.pagination > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-h-sm);
	height: var(--control-h-sm);
	padding: 0 var(--sp-2);
	border: 1px solid var(--c-border-input);
	border-radius: var(--r-md) !important; /* Bootstrap rounds only the first and last item */
	background: var(--c-surface);
	color: var(--c-text-2);
	font-size: var(--fs-13);
	font-variant-numeric: tabular-nums;
}
.v2 ul.pagination > li > a:hover { background: var(--c-surface-2); border-color: var(--c-border-hover); color: var(--c-text); text-decoration: none; }
.v2 ul.pagination > li.active > a, .v2 ul.pagination > li.active > span { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.v2 ul.pagination > li.disabled > a { opacity: .5; }

/* ======================================================================== Loading (7.9) */
.v2 .skeleton-box {
	background: var(--c-surface-3) !important; /* the legacy skeleton sets its grey with !important */
	border-radius: var(--r-sm);
	overflow: hidden;
	position: relative;
}
.v2 .skeleton-box::after {
	background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--c-surface) 60%, transparent) 50%, transparent 100%) !important;
}

/* ======================================================================== Dropdown menus */
.v2 .dropdown-menu {
	padding: var(--sp-1);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-14);
}
.v2 .dropdown-menu > li > a { padding: 7px var(--sp-3); border-radius: var(--r-sm); color: var(--c-text-2); }
.v2 .dropdown-menu > li > a:hover { background: var(--c-surface-3); color: var(--c-text); text-decoration: none; }

/* ======================================================================== Row / item menu (the "..." button) */
.v2-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-h-sm);
	height: var(--control-h-sm);
	border: 0;
	border-radius: var(--r-md);
	background: transparent;
	color: var(--c-text-muted);
	cursor: pointer;
}
.v2-menu-btn:hover, .v2-menu-btn[aria-expanded="true"] { background: var(--c-surface-3); color: var(--c-text); }
.v2-rowmenu { position: relative; display: inline-block; }
.v2-rowmenu__list {
	position: absolute;
	top: calc(100% + 4px);
	inset-inline-end: 0;
	z-index: var(--z-flyout);
	min-width: 200px;
	margin: 0;
	padding: var(--sp-1);
	list-style: none;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	text-align: start;
}
.v2-rowmenu__list[hidden] { display: none; }
.v2 .v2-rowmenu__item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--control-h-sm);
	padding: 0 var(--sp-3);
	border-radius: var(--r-sm);
	color: var(--c-text-2);
	font-size: var(--fs-14);
	white-space: nowrap;
}
.v2 .v2-rowmenu__item:hover, .v2 .v2-rowmenu__item:focus-visible { background: var(--c-surface-3); color: var(--c-text); text-decoration: none; }
.v2 .v2-rowmenu__item--danger { color: var(--c-danger-text); }
/* Server buttons (input type=submit) as menu items. */
.v2 input.v2-rowmenu__item { width: 100%; border: 0; background: transparent; font-family: var(--font-sans); text-align: start; cursor: pointer; }
.v2-rowmenu__sep { height: 1px; margin: var(--sp-1) 0; background: var(--c-border); }
.v2-card__foot { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); width: 100%; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--c-border-row); } /* clear: the rows above are floated columns */
.v2-card__foot > div { flex: 1 1 320px; min-width: 0; }
.v2-card__foot > div > .v2-card__title { margin: 0 0 2px; }
.v2-card__foot > div > .v2-card__desc { margin: 0; color: var(--c-text-muted); font-size: var(--fs-13); text-align: start; }
.v2-card__foot .btn { flex: 0 0 auto; margin-inline-start: auto; }

/* ======================================================================== Tooltip / popover (7.10) */
.v2-popover--help { position: absolute; z-index: var(--z-flyout); max-width: 320px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-13); }

/* Legacy "Info / No record information" boxes (the EmptyContainer of PagedRepeaters, tagged
   v2-empty-legacy by GEN-306) shown as the compact empty state. The --info variant also carries a
   bold "Info" word that the v2 empty state does without. */
.v2 .alert.v2-empty-legacy {
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: var(--sp-8) var(--sp-4);
	border: 0;
	background: transparent !important; /* legacy .alert-info background is !important */
	color: var(--c-text-muted);
	font-size: var(--fs-14);
	text-align: center;
}
.v2 .alert.v2-empty-legacy strong { font-weight: var(--fw-medium); color: var(--c-text); }
.v2 .alert.v2-empty-legacy--info > strong:first-child { display: none; }
.v2-card__actions-row { display: flex; justify-content: center; margin: var(--sp-3) 0; }
/* Callout with an action on the inline end (sec. 7.6). */
.v2 .alert.v2-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0 0; }
.v2-callout__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; }
.v2-callout__text strong { font-weight: var(--fw-semibold); }
.v2 .alert.v2-callout .btn { margin-inline-start: auto; }
.v2-actions-start { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
/* IBAN tab: room between the "IBAN API calls" actions and the "Clients API" section. */
.v2 .IbanApiFormPanel_ClientsAPI-p { margin-top: var(--sp-6); }

/* "Learn more": long explanations folded behind a summary line (sec. 5.7). */
.v2-learnmore { margin: var(--sp-1) 0 var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-14); }
.v2-learnmore > summary { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-accent-text); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.v2-learnmore > summary::-webkit-details-marker { display: none; }
.v2-learnmore > summary::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease); }
.v2-learnmore[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.v2-learnmore > p { margin: var(--sp-2) 0 0; max-width: 72ch; }

/* Settlement settings: one card per currency (merchant PayOuts tab, sec. 7.4). */
.v2-curcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); margin: var(--sp-3) 0; }
.v2-curcard { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.v2-curcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border-row); }
.v2 .v2-curcard__cur { margin: 0; font-family: var(--font-mono, monospace); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-text); }
.v2-curcard__active { font-size: var(--fs-13); color: var(--c-text-2); }
.v2-curcard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-4); flex: 1; }
.v2-curcard__grid > .form-group { margin: 0; }
.v2-curcard__grid > .form-group:nth-child(3) { grid-column: 1 / -1; }
.v2 .v2-curcard__grid h4.resource { margin: 0 0 var(--sp-1); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--c-text-2); }
.v2-curcard__checks { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-13); }
.v2-curcard__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border-row); background: var(--c-surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.v2 .v2-curcard input.v2-num { text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .v2-curcard__checks, .v2-curcard__grid { grid-template-columns: 1fr; } }

/* Action list: a stacked list of shortcuts, icon - label - chevron (merchant Summary links, sec. 7.2).
   The server button or link fills the row; the icon sits under it and does not take clicks. */
.v2 .v2-actionlist { margin: 0 0 var(--sp-3); padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.v2 .v2-actionlist > .list-group-item { position: relative; display: flex; align-items: center; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--c-border-row); border-radius: 0 !important; background: transparent; }
.v2 .v2-actionlist > .list-group-item:last-child { border-bottom: 0; }
.v2 .v2-actionlist > .list-group-item > .v2-icon { position: absolute; inset-inline-start: var(--sp-4); color: var(--c-text-muted); pointer-events: none; }
.v2 .v2-actionlist > .list-group-item::after { content: ""; position: absolute; inset-inline-end: var(--sp-4); width: 7px; height: 7px; border-inline-end: 1.5px solid var(--c-text-subtle); border-bottom: 1.5px solid var(--c-text-subtle); transform: rotate(-45deg); pointer-events: none; }
[dir="rtl"] .v2 .v2-actionlist > .list-group-item::after { transform: rotate(45deg); } /* inline-end is the left border in RTL */
.v2 .v2-actionlist .v2-actionlist__btn { display: block; width: 100%; margin: 0; padding: var(--sp-3) var(--sp-8) var(--sp-3) calc(var(--sp-4) + 28px); padding-inline-start: calc(var(--sp-4) + 28px); padding-inline-end: var(--sp-8); border: 0 !important; background: transparent !important; color: var(--c-text) !important; font: inherit; font-size: var(--fs-14); font-weight: var(--fw-medium); text-align: start; text-decoration: none; cursor: pointer; box-shadow: none !important; }
.v2 .v2-actionlist .v2-actionlist__btn:hover, .v2 .v2-actionlist .v2-actionlist__btn:focus-visible { background: var(--c-surface-2) !important; color: var(--c-accent-text) !important; }
.v2 .v2-actionlist > .list-group-item > div, .v2 .v2-actionlist > .list-group-item > span { width: 100%; }

/* Charts with no data collapse to one muted line (merchant Summary). */
.v2 .card.v2-chart--empty canvas, .v2 .card.v2-chart--empty .analytic-ov-ck { display: none !important; }
.v2 .card.v2-chart--empty > .card-inner { height: auto !important; }
.v2 .card.v2-chart--empty::after { content: attr(data-v2-empty-text); display: block; padding: 0 var(--sp-5) var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-13); }

/* Settings rows (sec. 7.2): toggle on the inline start, then the label (14/500) and a short muted
   description. The legacy markup is two floated columns (col-md-10 text | col-md-2 checkbox); the
   columns are tagged v2-setrow__text / v2-setrow__ctl and their shared parent becomes the row. */
.v2 div:has(> .v2-setrow__ctl) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); float: none; width: 100%; margin: 0 !important; padding: var(--sp-3) 0 !important; border-bottom: 1px solid var(--c-border-row); }
.v2 div:has(> .v2-setrow__ctl)::before, .v2 div:has(> .v2-setrow__ctl)::after { display: none; } /* bootstrap clearfix pseudo-elements would become flex items */
.v2 .v2-setrow__ctl { order: -1; float: none; width: auto; flex: 0 0 auto; padding: 1px 0 0 !important; text-align: start !important; }
.v2 .v2-setrow__text { display: flow-root; float: none; width: auto; flex: 1 1 0; min-width: 0; padding: 0 !important; }
.v2 .v2-setrow__text > h4.resource { margin: 0 0 2px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text); text-transform: none; }
.v2 .v2-setrow__text > p { margin: 0; padding: 0; max-width: 80ch; color: var(--c-text-muted); font-size: var(--fs-13); line-height: 1.5; text-align: start !important; }
.v2 .v2-setrow__text > p.v2-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2 .v2-setrow__more { margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--c-accent-text); font: inherit; font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer; }
.v2 .v2-setrow__more:hover { text-decoration: underline; }

/* The settings-row checkbox is drawn as a switch (style.min.css hides the input and paints a 30px
   FontAwesome toggle on its label instead). */
.v2 .v2-setrow__ctl input[type="checkbox"], .v2 .v2-pmcard .PM-checkbox-list input[type="checkbox"], .v2 .v2-featcard input[type="checkbox"] {
	display: inline-block !important; position: static !important; visibility: visible !important; opacity: 1 !important; -webkit-appearance: none; appearance: none; width: 36px; height: 20px; margin: 0; flex: 0 0 auto;
	border-radius: var(--r-pill); background-color: var(--c-border-input);
	background-image: radial-gradient(circle at 10px 50%, var(--c-surface) 7px, transparent 7.5px); background-repeat: no-repeat; background-position: 0 0;
	cursor: pointer; transition: background-color var(--dur-fast) var(--ease), background-position var(--dur-fast) var(--ease);
}
.v2 :is(.v2-setrow__ctl, .v2-pmcard .PM-checkbox-list, .v2-featcard) input[type="checkbox"]:checked { background-color: var(--c-accent); background-position: 16px 0; }
[dir="rtl"] .v2 :is(.v2-setrow__ctl, .v2-pmcard .PM-checkbox-list, .v2-featcard) input[type="checkbox"] { background-image: radial-gradient(circle at calc(100% - 10px) 50%, var(--c-surface) 7px, transparent 7.5px); }
[dir="rtl"] .v2 :is(.v2-setrow__ctl, .v2-pmcard .PM-checkbox-list, .v2-featcard) input[type="checkbox"]:checked { background-position: -16px 0; }
.v2 :is(.v2-setrow__ctl, .v2-pmcard .PM-checkbox-list, .v2-featcard) input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.v2 :is(.v2-setrow__ctl, .v2-pmcard .PM-checkbox-list, .v2-featcard) input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.v2 .v2-setrow__ctl label { display: none; }

/* "Required fields" and other checkbox groups: real checkboxes in a wrapping row. */
.v2 div:has(> .child-list-group), .v2 span:has(> .child-list-group) { clear: both; width: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding-block: var(--sp-1) var(--sp-2); }
.v2 div:has(> .child-list-group)::before, .v2 div:has(> .child-list-group)::after { display: none; }
.v2 .child-list-group { float: none; width: auto; padding: 0 !important; text-align: start !important; }
.v2 :is(.child-list-group, .v2-curcard) input[type="checkbox"], .v2 :is(.child-list-group, .v2-curcard) input[type="radio"] { display: inline-block !important; margin: 0 var(--sp-2) 0 0; margin-inline: 0 var(--sp-2); }
.v2 :is(.child-list-group, .v2-curcard) input + label::before { display: none !important; }
.v2 :is(.child-list-group, .v2-curcard) label { display: inline; margin: 0; font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--c-text-2); cursor: pointer; }

/* Feature boxes inside the settings list (Cashier mode, Timesaver): a section card, not a 3px grey frame. */
.v2 div.v2-setbox:has(> .v2-setrow__ctl), .v2 .v2-setbox { float: none; margin: var(--sp-3) 0 !important; padding: var(--sp-4) var(--sp-5) !important; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface-2); }
.v2 .v2-setbox ul { margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.v2 .v2-setbox li { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 2px; color: var(--c-text-2); font-size: var(--fs-13); }
.v2 .v2-setbox li > .fa-check { color: var(--c-success); font-size: var(--fs-12); }

/* Hosted page: each payment method is a section card - switch + name on top, its required fields below. */
.v2 div:has(> .v2-pmcard:not(.v2-pmcard--wide)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); float: none; padding: 0 !important; }
.v2 div:has(> .v2-pmcard:not(.v2-pmcard--wide))::before, .v2 div:has(> .v2-pmcard:not(.v2-pmcard--wide))::after { display: none; }
.v2 .v2-pmcard { float: none; width: auto; min-width: 0; margin: 0; padding: var(--sp-3) var(--sp-4) !important; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.v2 .v2-pmcard.col-lg-6 { grid-column: span 2; }
.v2 .v2-pmcard--wide { margin: 0 0 var(--sp-3); }
.v2 .v2-pmcard .row, .v2 .v2-pmcard [class*="col-"] { float: none; width: auto; margin: 0; padding: 0; }
.v2 .v2-pmcard .PM-checkbox-list { margin: 0 0 var(--sp-2); padding: 0; border: 0; background: none; }
.v2 .v2-pmcard .PM-checkbox-list > .list-group-item { display: flex; align-items: center; gap: var(--sp-2); float: none; width: auto; padding: 0; border: 0; background: none; }
.v2 .v2-pmcard .PM-checkbox-list > .list-group-item > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.v2 .v2-pmcard .PM-checkbox-list label { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text); cursor: pointer; }
.v2 .v2-pmcard .PM-checkbox-list input + label::before { display: none !important; }
.v2 .v2-pmcard span[style*="font-weight: 600"] { display: block; margin-top: var(--sp-1); color: var(--c-text-muted); font-size: var(--fs-12); font-weight: var(--fw-medium) !important; text-transform: uppercase; letter-spacing: .04em; }
.v2 .v2-pmcard div[style*="margin-bottom: 10px"] { margin-bottom: var(--sp-1) !important; }
@media (max-width: 560px) { .v2 .v2-pmcard.col-lg-6 { grid-column: auto; } }

/* Feature cards (program Permission tab): illustration, title with its switch, four-line description (the old fixed 85px box). */
.v2 .v2-featcard { display: flex; flex-direction: column; height: 100%; margin: 0; overflow: hidden; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg); background: var(--c-surface); box-shadow: none; }
.v2 .v2-featcard > .card-img-top { height: 88px; padding: var(--sp-3); object-fit: contain; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border-row); }
.v2 .v2-featcard > .card-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.v2 .v2-featcard > .card-inner > h4.resource { grid-column: 1; grid-row: 1; margin: 0; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text); text-transform: none; }
.v2 .v2-featcard > .card-inner > span { grid-column: 2; grid-row: 1; display: inline-flex; }
.v2 .v2-featcard > .card-inner > .v2-featcard__desc { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; color: var(--c-text-muted); font-size: var(--fs-13); line-height: 1.5; text-align: start; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.v2 .v2-featcard label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the label repeats the title; kept for screen readers */
.v2 .v2-featcard input + label::before { display: none !important; }
.v2 .row:has(> .col-md-3 > .v2-featcard) { display: flex; flex-wrap: wrap; }
.v2 .row:has(> .col-md-3 > .v2-featcard)::before, .v2 .row:has(> .col-md-3 > .v2-featcard)::after { display: none; }

/* Real checkboxes and radios everywhere (phase 5e). style.min.css hides every input (display:none) and paints
   a 30px FontAwesome toggle or a 14px box on its label; the native control is shown instead and the glyph
   dropped. Inputs that are hidden on purpose keep their state: hidden attribute or inline display:none,
   utility hide classes, custom-control / bootstrap-toggle / button-group inputs, the tab-set radios. */
.v2 :is(input[type="checkbox"], input[type="radio"]):not(.custom-control-input):not([hidden]):not([style*="display:none"]):not([style*="display: none"]):not(.d-none):not(.hide):not(.hidden):not(.sr-only):not(.ui-checkboxradio):not([data-toggle]):not(.toggle input):not([data-toggle="buttons"] input):not(.tabset > input) {
	display: inline-block !important;
	margin: 0;
	margin-inline-end: var(--sp-2);
	vertical-align: middle;
	cursor: pointer;
}
.v2 :is(input[type="checkbox"], input[type="radio"]):not(.custom-control-input):not([hidden]):not([style*="display:none"]):not([style*="display: none"]):not(.d-none):not(.hide):not(.hidden):not(.sr-only):not(.ui-checkboxradio):not([data-toggle]):not(.toggle input):not([data-toggle="buttons"] input):not(.tabset > input) + label::before { display: none !important; }
.v2 :is(input[type="checkbox"], input[type="radio"]):not(.custom-control-input) + label { display: inline; margin: 0; font-weight: var(--fw-regular); vertical-align: middle; cursor: pointer; }
.v2 :is(input[type="checkbox"], input[type="radio"]):disabled, .v2 :is(input[type="checkbox"], input[type="radio"]):disabled + label { cursor: not-allowed; opacity: .6; }
.v2 :is(.v2-setrow__ctl, .v2-pmcard .PM-checkbox-list, .v2-featcard) input[type="checkbox"] { margin-inline-end: 0 !important; } /* switches: spacing comes from their row */

/* Dashboard (phase 6, brief sec. 8.3 / 7.12). */
/* The purple "Status" / quick-link cards are normal cards; their inline white text follows the theme. */
.v2 .card.is-dark.quicklinks, .v2 .card.v2-statuscard { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; box-shadow: none; }
.v2 :is(.card.is-dark.quicklinks, .card.v2-statuscard) :is(h6, .title, span, label, a, div) { color: var(--c-text) !important; }
.v2 :is(.card.is-dark.quicklinks, .card.v2-statuscard) :is(p, label) { color: var(--c-text-muted) !important; font-size: var(--fs-13); }
/* Overview numbers read as KPI tiles: 28px tabular figures with the label above (no invented deltas). */
.v2 .analytic-ov-group { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-2) !important; text-align: start !important; }
.v2 .analytic-ov-group > .analytic-data { width: auto !important; margin: 0 !important; padding: var(--sp-2) var(--sp-3) !important; border: 1px solid var(--c-border-row); border-radius: var(--r-md); background: var(--c-surface-2); }
.v2 .analytic-ov-group > .analytic-data > .title { margin: 0 0 var(--sp-1); color: var(--c-text-muted) !important; font-size: var(--fs-12) !important; font-weight: var(--fw-medium); letter-spacing: .02em; text-transform: none; }
.v2 .analytic-ov-group > .analytic-data > .amount { color: var(--c-text) !important; font-size: 24px !important; line-height: 1.15; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
/* No internal scrolling in chart cards: the card grows with its list. */
.v2 .card.card-bordered[style*="overflow-y"] { max-height: none !important; overflow: visible !important; }

/* Page loader (review 2026-10-17): the footer UpdateProgress (".Newbar": a circle and "Loading") becomes a
   thin bar across the top of the window that grows and moves left to right. The markup, DisplayAfter delay
   and the beforeunload show / hide in Site.Master are unchanged. */
/* 2026-10-20 review: on the app header's bottom border (or an open dialog header's), header width only - never over the
   side menu - and above dialogs and their backdrop. ui-v2.js (placeLoader) sets the three variables when it shows. */
.v2 [id$="prgLoadingStatus"] { position: fixed !important; top: var(--v2-load-top, var(--header-h)); left: var(--v2-load-left, 0); width: var(--v2-load-width, 100%); z-index: var(--z-header); height: 3px; pointer-events: none; }
.v2 [id$="prgLoadingStatus"].v2-load--dialog { z-index: calc(var(--z-dialog) + 5); }
.v2 [id$="prgLoadingStatus"] .Newbar { position: absolute; inset: 0; width: auto; height: 3px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--c-accent-soft); box-shadow: none; transform: none; }
.v2 [id$="prgLoadingStatus"] .Newbar .circle { position: absolute; top: 0; left: 0; width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--c-accent); box-shadow: none; animation: v2-progress 1.8s cubic-bezier(.4, 0, .2, 1) infinite; }
.v2 [id$="prgLoadingStatus"] .Newbar p { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* "Loading" stays for screen readers */
@keyframes v2-progress { 0% { left: 0; width: 0; } 55% { left: 0; width: 75%; } 100% { left: 100%; width: 10%; } }
@media (prefers-reduced-motion: reduce) { .v2 [id$="prgLoadingStatus"] .Newbar .circle { animation: none; width: 100%; opacity: .6; } }

/* Popover surface (Columns menu, help popovers). Its base rule went with the v2 shell's user menu. */
.v2-popover {
	background: var(--c-surface);
	color: var(--c-text);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
}

/* Legacy filter panel (DataPageController): the title bar is as tall as the app header, the X sits in it,
   and the footer holds Reset and Search side by side. Legacy rules are id-based, hence the !important. */
.v2 [id$="_FilterTd"] [id$="_FiltersPanel_Header"] {
	display: flex !important;
	align-items: center;
	height: var(--header-h) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding-block: 0 !important;
	border-bottom: 1px solid var(--c-border) !important;
	background: var(--c-surface) !important;
	line-height: 1.2 !important;
}
.v2 [id$="_FilterTd"] [id$="_ListButtonClose"],
.v2 [id$="_FilterTd"].filter-open [id$="_ListButtonClose"] { top: calc((var(--header-h) - 32px) / 2) !important; height: 32px; min-width: 32px; padding: 0 var(--sp-3) !important; display: inline-flex !important; align-items: center; justify-content: center; }
.v2 [id$="_FilterTd"] [id$="_FiltersPanel_Footer"] {
	align-items: center;
	justify-content: flex-end !important;
	flex-wrap: nowrap !important;
	gap: var(--sp-2);
	height: auto !important;
	padding: var(--sp-3) var(--sp-5) !important;
	background: var(--c-surface) !important;
	border-top: 1px solid var(--c-border) !important;
}
.v2 [id$="_FilterTd"] [id$="_FiltersPanel_Footer"] > * { float: none !important; margin: 0 !important; }
.v2 [id$="_FilterTd"] [id$="_FiltersPanel_Footer"] .btn,
.v2 [id$="_FilterTd"] [id$="_FiltersPanel_DataButtons_btnSearch"] {
	flex: 1 1 0;
	width: auto !important;
	max-width: none !important;
	height: var(--control-h) !important;
	padding: 0 var(--sp-4) !important;
	font-size: var(--fs-14) !important;
	line-height: 1 !important;
}

/* Dialog header (GEN-236 layout, rendered by Admin/Controls/ModalDialog.cs): optional icon tile, title with an
   optional subtitle, close at the end; a tinted strip as tall as the app header. */
.v2 .modal-content { padding: 0 !important; } /* the header strip and the body meet the dialog edges */
.v2 .modal-header { box-sizing: border-box; height: var(--header-h); min-height: var(--header-h); padding-block: 0 !important; background: var(--c-surface-2); } /* as tall as the app header */
.v2-modal-head { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto; min-width: 0; }
.v2-modal-head__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--c-accent-soft); color: var(--c-accent-text); font-size: 15px; }
.v2-modal-head__text { min-width: 0; }
.v2 .v2-modal-head .modal-title { margin: 0; overflow: hidden; color: var(--c-text); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: 1.3; text-overflow: ellipsis; }
.v2-modal-head__sub { margin: 2px 0 0; color: var(--c-text-muted); font-size: var(--fs-13); line-height: 1.4; }
.v2 .modal-header .close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 0 0 auto; padding: 0; border-radius: var(--r-md); font-size: 22px; line-height: 1; }
[dir="rtl"] .v2 .modal-header .close { margin: 0 auto 0 0; }
.v2 .modal-header .close:hover { background: var(--c-surface-3); opacity: 1; }

/* Stand-alone pages (reports, tools: a PanelSection directly on the page, not a list or a record) get the same
   card as lists and records: surface, light border, radius and padding, title as the page title. */
.v2 #dvMain .panel.panel-default:not([id$="_FormView_FormPanel"]):not([id$="_ListTd"] *):not(.v2-recgrid *):not(.modal *):not(.panel *):not(.tab-content *) {
	float: none;
	width: auto;
	margin: 0 0 var(--sp-5);
	padding: var(--sp-5) var(--sp-6);
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-lg);
	box-shadow: none;
}
.v2 #dvMain .panel.panel-default:not([id$="_FormView_FormPanel"]):not([id$="_ListTd"] *):not(.v2-recgrid *):not(.modal *):not(.panel *):not(.tab-content *) > .panel-heading {
	position: static;
	float: none;
	width: auto;
	margin: 0 0 var(--sp-4);
	padding: 0 !important;
	background: transparent;
	border: 0 !important;
	color: var(--c-text) !important;
	font-size: var(--fs-22);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}
.v2 #dvMain .panel.panel-default:not([id$="_FormView_FormPanel"]):not([id$="_ListTd"] *):not(.v2-recgrid *):not(.modal *):not(.panel *):not(.tab-content *) > .panel-body {
	float: none;
	width: auto;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Dialogs are full-height panels (legacy .modal-content min-height: 100vh, .modal-body height: 83vh), which left a
   white band under the footer whenever header + body + footer came to less than the window. The content is a
   column and the body takes the remaining height, so the footer sits on the bottom edge. */
.v2 .modal-dialog > .modal-content { display: flex; flex-direction: column; }
.v2 .modal-dialog > .modal-content > .modal-header,
.v2 .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto; float: none; width: auto; }
.v2 .modal-dialog > .modal-content > .modal-body { flex: 1 1 auto; float: none; width: auto; min-height: 0; }
.v2 .modal-dialog > .modal-content > .modal-footer { min-height: 0; border-radius: 0; }

/* Add Merchant: field rows as an even grid (3 across, 1 on narrow screens) instead of floated bootstrap columns
   of mixed widths; the wrapper of an optional field (asp:Panel) takes no box. */
.v2 .v2-formgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-5); margin: 0 0 var(--sp-2); }
.v2 .v2-formgrid::before, .v2 .v2-formgrid::after { content: none; }
.v2 .v2-formgrid > [class*="col-"], .v2 .v2-formgrid > div > [class*="col-"] { float: none; width: auto; min-height: 0; padding: 0; }
.v2 .v2-formgrid > div:not([class*="col-"]) { display: contents; }
.v2 .v2-formgrid .form-group { margin-bottom: var(--sp-4); }
@media (max-width: 767.98px) { .v2 .v2-formgrid { grid-template-columns: minmax(0, 1fr); } }

/* Permission rows: the Balance action row, with the checkbox (and its label) at the end. */
.v2-permrows { clear: both; margin: var(--sp-2) 0; }
.v2-permrow__check { flex: 0 0 auto; }
.v2-permrow__check > span { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border: 1px solid var(--c-border-input); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; }
.v2-permrow__check input[type="checkbox"] { margin: 0; }
.v2-permrow__check label { margin: 0; color: var(--c-text); font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.v2-permrow:has(input:checked) { border-color: var(--c-accent-border); background: var(--c-accent-soft); }
.v2-permrow:has(input:checked) .v2-permrow__check > span { border-color: var(--c-accent); }
@media (max-width: 560px) { .v2-permrow { flex-wrap: wrap; } .v2-permrow__check { width: 100%; } }

/* One look for every input and dropdown. GEN-236 sections use their own classes (actions-field / actions-select,
   form-select, ai-input) and some dropdowns carry no class at all, so they kept the legacy look: square grey
   boxes and the green arrow.gif that style.css puts on every select with !important. */
.v2 :is(.actions-field, .actions-select, .form-select, .form-select-sm, .ai-input),
.v2 select:not([class]):not([multiple]):not([size]) {
	box-sizing: border-box;
	height: var(--control-h);
	padding: 0 10px;
	border: 1px solid var(--c-border-input);
	border-radius: var(--r-md);
	background-color: var(--c-surface);
	color: var(--c-text);
	font: var(--fw-regular) var(--fs-14)/1.4 var(--font-sans);
	box-shadow: none;
}
.v2 :is(.actions-field, .ai-input) { width: 100%; max-width: 260px; }
.v2 :is(.actions-select, .form-select) { width: 100%; max-width: 380px; }
.v2 .form-select-sm { height: var(--control-h-sm); font-size: var(--fs-13); }
.v2 :is(.actions-field, .actions-select, .form-select, .form-select-sm, .ai-input):hover { border-color: var(--c-border-hover); }
.v2 :is(.actions-field, .actions-select, .form-select, .form-select-sm, .ai-input):focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }
/* The dropdown arrow: a slate chevron instead of the legacy green gif. */
.v2 select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	appearance: none;
	padding-inline-end: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 12px 12px !important;
}
[dir="rtl"] .v2 select:not([multiple]):not([size]) { background-position: left 10px center !important; }
html.np-dark .v2 select:not([multiple]):not([size]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Dialog header = the Silverflow wizard header (2026-10-19 review): icon tile, title, subtitle under it, on the light
   surface with a rule below, as tall as the app header (--header-h, 64px). */
.v2 .modal-header { padding-inline: var(--sp-5) !important; }
.v2-modal-head__icon svg { display: block; }

/* Changelog (Admin/changelog.aspx): the stand-alone page card; the table of contents and the versions are floated
   bootstrap columns, so the body contains them, and the contents column stays in view while scrolling. */
.v2 .changelog-page > .panel-body { display: flow-root; }
.v2 .changelog-page > .panel-body > [class*="col-"] { padding-inline: 0; }
/* The contents list keeps room at the top for its "Table of content" label (style.min.css .toc:before, absolute). */
.v2 .changelog-page ol.toc { margin: 0 var(--sp-5) 0 0; padding: 44px var(--sp-4) var(--sp-3); line-height: 28px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface-2); }
.v2 .changelog-page ol.toc::before { top: var(--sp-4); left: var(--sp-4); color: var(--c-text-subtle); }
.v2 .changelog-page ol.toc a { color: var(--c-text-2); }
.v2 .changelog-page ol.toc a:hover { color: var(--c-accent-text); }
@media (min-width: 1200px) { .v2 .changelog-page ol.toc { max-height: calc(100vh - var(--header-h) - var(--sp-8)); overflow-y: auto; } }
@media (min-width: 1200px) { .v2 .changelog-page > .panel-body > div > .col-lg-3 { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
.v2 .changelog-page section + section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-border-row); }

/* ---------------------------------------------------------------- affiliate rev share fee wizard */
/* Affiliates/FeesMerchant|FeesTerminal|FeesBrand.ascx dialog mdEdit, driven by Scripts/ui-v2/fee-wizard.js. The footer
   (Save) only shows on the last step; the fee-mode chooser is hidden while it offers a single mode. */
.v2 .modal-content.fw-active:not(.fw-last) > .modal-footer { display: none !important; }
.v2 .modal-content.fw-active [id$="_phFeeMode"], .v2 .modal-content.fw-active .row:has(> div > select[id$="ddlAffiliateMerchantFeeMode"]):has(option:only-child) { display: none; }
.v2 .modal-content.fw-active .row:has(> div > select[id$="ddlAffiliateMerchantFeeMode"]):has(option:only-child) + hr { display: none; }
.fw { display: flex; flex-direction: column; gap: var(--sp-4); }
.fw-steps { display: flex; gap: var(--sp-2); margin: 0; padding: 0 0 var(--sp-4); list-style: none; border-bottom: 1px solid var(--c-border-row); counter-reset: none; }
.fw-steps > li { display: flex; flex: 1 1 0; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--c-text-muted); font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.fw-steps > li:hover { background: var(--c-surface-2); color: var(--c-text); }
.fw-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-surface); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.fw-steps > li.is-current { background: var(--c-accent-soft); color: var(--c-accent-text); font-weight: var(--fw-semibold); }
.fw-steps > li.is-current .fw-steps__num { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.fw-steps > li.is-done .fw-steps__num { border-color: var(--c-success); background: var(--c-success-bg); color: var(--c-success-text); }
.fw-step[hidden] { display: none !important; }
.fw-lead { margin: 0 0 var(--sp-3); color: var(--c-text); font-size: var(--fs-15, 15px); font-weight: var(--fw-medium); }
.fw-ref { color: var(--c-text-muted); font-weight: var(--fw-regular); }
.fw-sub { margin: var(--sp-2) 0 var(--sp-2); color: var(--c-text); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.fw-optional { margin-inline-start: var(--sp-1); color: var(--c-text-subtle); font-weight: var(--fw-regular); }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 var(--sp-4); }
.fw-grid > .form-group { min-width: 0; }
.fw-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.fw-method { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); text-align: start; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.fw-method:hover { border-color: var(--c-accent); background: var(--c-surface-2); }
.fw-method:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.fw-method.is-selected { border-color: var(--c-accent); background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
.fw-method[hidden] { display: none; }
.fw-method__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.fw-method__desc { display: -webkit-box; overflow: hidden; color: var(--c-text-muted); font-size: var(--fs-12); line-height: 1.45; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.fw-hidden-ctl { display: none; }
.fw-step[data-fw-step="3"] .row { margin-inline: 0; }
.fw-step[data-fw-step="3"] .row > [class*="col-"] { padding-inline: 0 var(--sp-3); }
.fw-step[data-fw-step="3"] .row > [class*="col-"]:has(> br:only-child) { display: none; }
.fw-review { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface-2); }
.fw-review dt { color: var(--c-text-muted); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.fw-review dd { margin: 0; color: var(--c-text); font-size: var(--fs-14); overflow-wrap: anywhere; }
.fw-nav { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--c-border-row); }
.fw-nav__error { flex: 1 1 auto; color: var(--c-danger-text); font-size: var(--fs-13); text-align: center; }
.fw-nav [data-fw-next] { margin-inline-start: auto; }
@media (max-width: 640px) {
	.fw-steps > li { flex: 0 0 auto; padding: var(--sp-2); }
	.fw-steps > li:not(.is-current) { font-size: 0; gap: 0; } /* numbers only, the current step keeps its name */
	.fw-review { grid-template-columns: 1fr; }
}

/* Action picker tiles (rules engine: onboarding rules, scoring rules, scoring setup). The legacy .Onboaridngbutton-list
   is a 14%-wide flex row with 80px labels, and the phase 5e radio rule above (".v2 :is(...) + label", 0-3-2) makes
   every radio label display:inline, so the tiles shrank to their text. These rules (0-3-3) outrank it and the legacy
   dark.min.css tile colours (html.np-dark ..., 0-2-4): an equal
   grid of same-size tiles. The radio itself stays hidden by the legacy rule (visibility:hidden; position:absolute). */
.v2 .Onboaridngbutton-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.v2 .Onboaridngbutton-list > li { display: block; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; position: relative; }
.v2 .Onboaridngbutton-list > li > input[type="radio"] + label { display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 72px; margin: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border-input); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; text-align: center; white-space: normal; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.v2 .Onboaridngbutton-list > li > input[type="radio"] + label:hover { border-color: var(--c-accent); background: var(--c-surface-2); }
.v2 .Onboaridngbutton-list > li > input[type="radio"]:focus-visible + label { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.v2 .Onboaridngbutton-list > li > input[type="radio"]:checked + label { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-text); }
.v2 .Onboaridngbutton-list > li > input[type="radio"]:disabled + label { opacity: .6; cursor: not-allowed; }