/*
 * Componentes compartilhados do SYSWEB.
 *
 * Marca: /img/logo-emultec-blue.svg é a assinatura completa dos cabeçalhos;
 * /img/logo-emultec-icon-blue.svg é a variante para espaços compactos.
 * Ajuda contextual: quadrado amarelo com "?" branco identifica um link para
 * a explicação exata daquele ponto ou tela no Manual EMULTEC.
 */
:root {
	--sysweb-color-page: #f4f7f9;
	--sysweb-color-surface: #fff;
	--sysweb-color-ink: #203944;
	--sysweb-color-muted: #667b85;
	--sysweb-color-line: #dce7eb;
	--sysweb-color-soft-line: #edf2f4;
	--sysweb-color-primary: #1677a8;
	--sysweb-color-primary-hover: #105f88;
	--sysweb-color-danger: #a92e2e;
	--sysweb-color-warning-bg: #fff8e2;
	--sysweb-color-warning-ink: #765a09;
	--sysweb-radius: 12px;
	--sysweb-radius-control: 8px;
	--sysweb-control-height: 40px;
	--sysweb-touch-target: 44px;
	--sysweb-shadow-surface: 0 3px 14px rgba(24, 55, 68, .08);
}

.sysweb-visual-classic .sysweb-ui-scope {
	--sysweb-color-page: #fff;
	--sysweb-color-ink: #333;
	--sysweb-color-muted: #777;
	--sysweb-color-line: #ccc;
	--sysweb-color-soft-line: #ddd;
	--sysweb-color-primary: #006dcc;
	--sysweb-color-primary-hover: #0044cc;
	--sysweb-radius: 4px;
	--sysweb-radius-control: 4px;
	--sysweb-shadow-surface: none;
}

/* Visual explícito, independente da engine. Mesma geometria do Moderno. */
body.sysweb-visual-dark {
	--sysweb-color-page: #121a23;
	--sysweb-color-surface: #1c2835;
	--sysweb-color-elevated: #243344;
	--sysweb-color-secondary: #22303e;
	--sysweb-color-ink: #e3eaf0;
	--sysweb-color-muted: #a9b9c8;
	--sysweb-color-placeholder: #a9b9c8;
	--sysweb-color-line: #52677b;
	--sysweb-color-soft-line: #344759;
	--sysweb-color-input: #17222e;
	--sysweb-color-hover: #2a4054;
	--sysweb-color-active: #234965;
	--sysweb-color-focus: #8acdf5;
	--sysweb-color-primary: #6bbdeb;
	--sysweb-color-primary-hover: #a3d9f7;
	--sysweb-color-primary-fill: #18668f;
	--sysweb-color-primary-fill-hover: #1c739f;
	--sysweb-color-danger: #ffb2b2;
	--sysweb-color-danger-ink: #ffb2b2;
	--sysweb-color-danger-bg: #492b34;
	--sysweb-color-danger-line: #99616c;
	--sysweb-color-success: #a2dfb5;
	--sysweb-color-success-bg: #203f33;
	--sysweb-color-warning-bg: #40371e;
	--sysweb-color-warning-ink: #f4d583;
	--sysweb-color-warning-line: #958052;
	--sysweb-color-info: #a6d7f5;
	--sysweb-color-info-bg: #223e52;
	--sysweb-color-disabled: #293542;
	--sysweb-color-stripe: #202e3c;
	--sysweb-color-badge-bg: #304254;
	--sysweb-color-badge-ink: #c6d7e5;
	--sysweb-color-overlay: rgba(8, 13, 20, .72);
	--sysweb-color-processing: rgba(18, 26, 35, .94);
	--sysweb-shadow-surface: 0 3px 14px rgba(0, 0, 0, .24);
	--sysweb-shadow-elevated: 0 12px 30px rgba(0, 0, 0, .4);
	color-scheme: dark;
	background: var(--sysweb-color-page) !important;
	color: var(--sysweb-color-ink);
}

/*
 * API semântica pequena para telas que aderem à fundação de UI. O adaptador
 * Bootstrap fica abaixo desta camada e nunca é a API pública dos PHPs.
 * :where() mantém a especificidade da base baixa para que o CSS próprio de
 * cada módulo continue responsável por densidade e estados do domínio.
 */
/* O adaptador define variáveis no próprio scope: só herdar do body não basta. */
.sysweb-visual-dark .sysweb-ui-scope {
	--sysweb-bs-body-color: var(--sysweb-color-ink);
	--sysweb-bs-body-bg: var(--sysweb-color-surface);
	--sysweb-bs-secondary-color: var(--sysweb-color-muted);
	--sysweb-bs-secondary-bg: var(--sysweb-color-secondary);
	--sysweb-bs-tertiary-bg: var(--sysweb-color-secondary);
	--sysweb-bs-border-color: var(--sysweb-color-line);
	--sysweb-bs-emphasis-color: var(--sysweb-color-ink);
}
.sysweb-visual-dark .sysweb-ui-scope :where(h1, h2, h3, h4, h5, h6) { color: var(--sysweb-color-ink); }
:where(.sysweb-ui-scope.sysweb-page),
:where(.sysweb-ui-scope) :where(.sysweb-page) {
	box-sizing: border-box;
	color: var(--sysweb-color-ink);
}

/* Início estrutural do conteúdo moderno após rows/guias flutuantes do shell legado. */
:where(.sysweb-ui-scope.sysweb-page.sysweb-content-start) {
	clear: both;
}

/* Composição opt-in para páginas de trabalho: notificações, logística,
 * solicitações, gestão e API. Não redefine containers/grid do Bootstrap 2. */
.sysweb-ui-scope.sysweb-workspace {
	width: calc(100% - 32px);
	max-width: 1440px;
	min-width: 0;
	margin: 0 auto 28px;
	padding: 20px;
	background: var(--sysweb-color-page);
	border-radius: var(--sysweb-radius);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.sysweb-workspace *, .sysweb-workspace *::before, .sysweb-workspace *::after { box-sizing: border-box; }
.sysweb-workspace [hidden] { display: none !important; }
.sysweb-workspace :is(h1, h2, h3, h4) { float: none; color: var(--sysweb-color-ink); line-height: 1.3; }
.sysweb-workspace :is(h2, h3, h4) { margin: 0 0 12px; }
.sysweb-workspace h2 { font-size: 21px; }
.sysweb-workspace h3 { font-size: 19px; }
.sysweb-workspace hr { border: 0; border-top: 1px solid var(--sysweb-color-line); }
.sysweb-workspace form { margin: 0; }
.sysweb-workspace .sysweb-page-header { margin-bottom: 20px; }
.sysweb-workspace .sysweb-page-header h1 { margin: 0 0 8px; font-size: 27px; }
.sysweb-workspace .sysweb-page-header p { margin: 0 0 8px; color: var(--sysweb-color-muted); }
.sysweb-workspace .sysweb-card { min-width: 0; padding: 18px; margin-bottom: 16px; }
.sysweb-workspace .sysweb-section-header { justify-content: space-between; margin-bottom: 14px; }
.sysweb-workspace .sysweb-section-header > :is(h2, h3, h4) { margin: 0; }
.sysweb-workspace .sysweb-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	align-items: end;
	gap: 14px;
}
.sysweb-workspace .sysweb-field-stacked { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.sysweb-workspace .sysweb-field-stacked > label { margin: 0; font-weight: 700; color: var(--sysweb-color-ink); }
.sysweb-workspace :is(.sysweb-input, .sysweb-select) {
	width: 100%; min-width: 0; max-width: 100%; height: auto;
	min-height: var(--sysweb-touch-target); margin: 0; padding: 8px 10px;
	background-color: var(--sysweb-color-input, var(--sysweb-color-surface));
	color: var(--sysweb-color-ink); border-color: var(--sysweb-color-line);
}
.sysweb-workspace input.sysweb-input:is([type=date], [type=time]) { -webkit-appearance: none; appearance: none; }
.sysweb-workspace .sysweb-input::placeholder { color: var(--sysweb-color-muted); opacity: 1; }
.sysweb-workspace :is(.sysweb-input, .sysweb-select):disabled { background-color: var(--sysweb-color-disabled, #edf1f3); color: var(--sysweb-color-muted); cursor: not-allowed; }
.sysweb-workspace .sysweb-btn { min-height: var(--sysweb-touch-target); max-width: 100%; white-space: normal; text-shadow: none; }
.sysweb-workspace input.sysweb-btn { width: auto; height: auto; }
.sysweb-workspace .sysweb-btn:disabled { opacity: .6; cursor: not-allowed; }
.sysweb-workspace .sysweb-actions-start { justify-content: flex-start; }
.sysweb-workspace .sysweb-actions > form { max-width: 100%; }
.sysweb-workspace .sysweb-muted { color: var(--sysweb-color-muted); }
.sysweb-workspace .sysweb-table-wrap { min-width: 0; max-width: 100%; }
.sysweb-workspace .sysweb-table th { padding: 10px 12px; text-align: left; }
.sysweb-workspace .sysweb-table-wrap:focus-visible,
.sysweb-workspace summary:focus-visible { outline: 3px solid var(--sysweb-color-focus, var(--sysweb-color-primary)); outline-offset: 2px; }
.sysweb-workspace .sysweb-key-value { table-layout: fixed; }
.sysweb-workspace .sysweb-key-value th { width: 32%; color: var(--sysweb-color-muted); }
.sysweb-workspace .sysweb-key-value :is(th, td) { overflow-wrap: anywhere; }
.sysweb-workspace :is(code, pre) { color: var(--sysweb-color-ink); background: var(--sysweb-color-secondary, #edf2f4); border-color: var(--sysweb-color-line); }
.sysweb-workspace code { white-space: normal; overflow-wrap: anywhere; }
.sysweb-workspace .sysweb-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-bottom: 20px; }
.sysweb-workspace .sysweb-metric { min-width: 0; padding: 16px; }
.sysweb-workspace .sysweb-metric > span { color: var(--sysweb-color-muted); }
.sysweb-workspace .sysweb-metric > strong { display: block; margin-top: 6px; font-size: 28px; line-height: 1.3; }
.sysweb-workspace .sysweb-link-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.sysweb-workspace .sysweb-link-list > li { max-width: 100%; }
.sysweb-workspace .sysweb-record-list { display: grid; gap: 14px; }
.sysweb-workspace .sysweb-record { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin: 0; list-style: none; }
.sysweb-workspace .sysweb-record > li { min-width: 0; }
.sysweb-workspace .sysweb-record label { display: block; margin: 0 0 4px; font-size: 12px; color: var(--sysweb-color-muted); }
@media (max-width: 767px) {
	.sysweb-ui-scope.sysweb-workspace { width: calc(100% - 16px); padding: 12px; }
	.sysweb-workspace .sysweb-card { padding: 14px; }
	.sysweb-workspace .sysweb-page-header h1 { font-size: 24px; }
	.sysweb-workspace .sysweb-key-value th { width: 40%; }
}
@media (max-width: 480px) {
	.sysweb-workspace :is(.sysweb-input, .sysweb-select) { font-size: 16px; }
	.sysweb-workspace .sysweb-actions-start > :is(.sysweb-btn, form) { width: 100%; }
	.sysweb-workspace .sysweb-actions-start > form > .sysweb-btn { width: 100%; }
}

:where(.sysweb-ui-scope) :where(.sysweb-toolbar) {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

:where(.sysweb-ui-scope) :where(.sysweb-field) {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	margin: 0;
}

:where(.sysweb-ui-scope) :where(.sysweb-field__label) {
	margin: 0;
	color: var(--sysweb-color-muted);
	font-size: 12px;
	font-weight: 700;
}

:where(.sysweb-ui-scope) :where(.sysweb-input, .sysweb-select) {
	box-sizing: border-box;
	min-height: var(--sysweb-control-height);
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--sysweb-color-line);
	border-radius: var(--sysweb-radius-control);
	background-color: var(--sysweb-color-surface);
	color: var(--sysweb-color-ink);
	font: inherit;
	line-height: 1.4;
}

:where(.sysweb-ui-scope) :where(.sysweb-input:focus, .sysweb-select:focus) {
	border-color: var(--sysweb-color-primary);
	outline: 2px solid var(--sysweb-color-focus, rgba(22, 119, 168, .2));
	outline-offset: 1px;
	box-shadow: none;
}

:where(.sysweb-ui-scope) :where(.sysweb-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: var(--sysweb-control-height);
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--sysweb-color-line);
	border-radius: var(--sysweb-radius-control);
	background: var(--sysweb-color-surface);
	color: var(--sysweb-color-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

:where(.sysweb-ui-scope) :where(.sysweb-btn:hover, .sysweb-btn:focus) {
	text-decoration: none;
}

:where(.sysweb-ui-scope) :where(.sysweb-btn:focus-visible) {
	outline: 3px solid var(--sysweb-color-focus, rgba(22, 119, 168, .28));
	outline-offset: 2px;
}

/*
 * Ponte mínima para links que consomem o contrato de botão. O seletor de tipo
 * repõe apenas a especificidade que o shell Bootstrap 2 usa em a/a:hover;
 * as classes de módulo continuam podendo sobrescrever o componente.
 */
:where(.sysweb-ui-scope) a:where(.sysweb-btn),
:where(.sysweb-ui-scope) a:where(.sysweb-btn):visited {
	color: var(--sysweb-color-ink);
	text-decoration: none;
}

:where(.sysweb-ui-scope) a:where(.sysweb-btn):hover,
:where(.sysweb-ui-scope) a:where(.sysweb-btn):focus {
	color: var(--sysweb-color-ink);
	text-decoration: none;
}

:where(.sysweb-ui-scope) a:where(.sysweb-btn):focus:not(:focus-visible) {
	outline: none;
}

:where(.sysweb-ui-scope) a:where(.sysweb-btn):focus-visible {
	outline: 3px solid var(--sysweb-color-focus, rgba(22, 119, 168, .28));
	outline-offset: 2px;
}

:where(.sysweb-ui-scope) :where(.sysweb-btn-primary) {
	--sysweb-bs-btn-bg: var(--sysweb-color-primary-fill, var(--sysweb-color-primary));
	--sysweb-bs-btn-border-color: var(--sysweb-color-primary-fill, var(--sysweb-color-primary));
	--sysweb-bs-btn-hover-bg: var(--sysweb-color-primary-fill-hover, var(--sysweb-color-primary-hover));
	--sysweb-bs-btn-hover-border-color: var(--sysweb-color-primary-fill-hover, var(--sysweb-color-primary-hover));
	background: var(--sysweb-color-primary-fill, var(--sysweb-color-primary));
	border-color: var(--sysweb-color-primary-fill, var(--sysweb-color-primary));
	color: #fff;
}

:where(.sysweb-ui-scope) :where(.sysweb-btn-primary:hover, .sysweb-btn-primary:focus) {
	background: var(--sysweb-color-primary-fill-hover, var(--sysweb-color-primary-hover));
	border-color: var(--sysweb-color-primary-fill-hover, var(--sysweb-color-primary-hover));
	color: #fff;
}

:where(.sysweb-ui-scope) a:where(.sysweb-btn-primary),
:where(.sysweb-ui-scope) a:where(.sysweb-btn-primary):visited {
	color: #fff;
}

:where(.sysweb-ui-scope) a:where(.sysweb-btn-primary):hover,
:where(.sysweb-ui-scope) a:where(.sysweb-btn-primary):focus {
	color: #fff;
}

:where(.sysweb-ui-scope) :where(.sysweb-btn-compact) {
	min-height: 32px;
	padding: 5px 9px;
	font-size: 12px;
}

/* Ação destrutiva sem alterar geometria entre os estados. */
:where(.sysweb-ui-scope) :where(.sysweb-btn-danger),
:where(.sysweb-ui-scope) a:where(.sysweb-btn-danger):visited,
:where(.sysweb-ui-scope) a:where(.sysweb-btn-danger):hover,
:where(.sysweb-ui-scope) a:where(.sysweb-btn-danger):focus,
:where(.sysweb-ui-scope) :where(.sysweb-btn-danger:hover, .sysweb-btn-danger:focus) {
	background: var(--sysweb-color-danger-bg, #fff0f0);
	border-color: var(--sysweb-color-danger-line, #a92e2e);
	color: var(--sysweb-color-danger-ink, #7f2525);
}

:where(.sysweb-ui-scope) :where(.sysweb-actions) {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

:where(.sysweb-ui-scope) :where(.sysweb-surface) {
	box-sizing: border-box;
	border: 1px solid var(--sysweb-color-line);
	border-radius: var(--sysweb-radius);
	background: var(--sysweb-color-surface);
	box-shadow: var(--sysweb-shadow-surface);
}

:where(.sysweb-ui-scope) :where(.sysweb-surface__header) {
	padding: 11px 13px;
	border-bottom: 1px solid var(--sysweb-color-soft-line);
	background: transparent;
}

:where(.sysweb-ui-scope) :where(.sysweb-surface__body) {
	padding: 13px;
}

:where(.sysweb-ui-scope) :where(.sysweb-table-wrap) {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

:where(.sysweb-ui-scope) :where(.sysweb-table) {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--sysweb-color-surface);
	color: var(--sysweb-color-ink);
}

:where(.sysweb-ui-scope) :where(.sysweb-table) > thead > tr > th,
:where(.sysweb-ui-scope) :where(.sysweb-table) > tbody > tr > td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--sysweb-color-soft-line);
	vertical-align: top;
}

:where(.sysweb-ui-scope) :where(.sysweb-table) > thead > tr > th {
	background: var(--sysweb-color-secondary, #f3f7f9);
	color: var(--sysweb-color-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .035em;
	text-align: left;
	text-transform: uppercase;
}

:where(.sysweb-ui-scope) :where(.sysweb-table-striped) > tbody > tr:nth-of-type(even) > td {
	background: var(--sysweb-color-stripe, #f9fbfc);
}

.sysweb-visual-classic :where(.sysweb-ui-scope) :where(.sysweb-table-striped) > tbody > tr:nth-of-type(even) > td {
	background: #f0f7fb;
}

:where(.sysweb-ui-scope) :where(.sysweb-alert) {
	box-sizing: border-box;
	margin: 0 0 12px;
	padding: 11px 13px;
	border: 1px solid var(--sysweb-color-line);
	border-radius: var(--sysweb-radius-control);
}

:where(.sysweb-ui-scope) :where(.sysweb-alert-warning) {
	border-color: var(--sysweb-color-warning-line, #efd58a);
	background: var(--sysweb-color-warning-bg);
	color: var(--sysweb-color-warning-ink);
}

:where(.sysweb-ui-scope) :where(.sysweb-alert-danger) {
	border-color: var(--sysweb-color-danger-line, #e1aaaa);
	background: var(--sysweb-color-danger-bg, #fff0f0);
	color: var(--sysweb-color-danger-ink, #7f2525);
}

:where(.sysweb-ui-scope) :where(.sysweb-badge) {
	display: inline-flex;
	align-items: center;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--sysweb-color-badge-bg, #edf1f3);
	color: var(--sysweb-color-badge-ink, #53636b);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

:where(.sysweb-ui-scope) :where(.sysweb-alert-info, .sysweb-badge-info) {
	background: var(--sysweb-color-info-bg, #eaf5fc);
	color: var(--sysweb-color-info, #235b7a);
}
:where(.sysweb-ui-scope) :where(.sysweb-alert-success, .sysweb-badge-success, .sysweb-btn-success) {
	background: var(--sysweb-color-success-bg, #e7f4eb);
	color: var(--sysweb-color-success, #245d36);
}
:where(.sysweb-ui-scope) :where(.sysweb-badge-danger) {
	background: var(--sysweb-color-danger-bg, #fff0f0);
	color: var(--sysweb-color-danger-ink, #7f2525);
}
:where(.sysweb-ui-scope) :where(.sysweb-badge-warning, .sysweb-btn-warning) {
	background: var(--sysweb-color-warning-bg);
	color: var(--sysweb-color-warning-ink);
}

:where(.sysweb-ui-scope) :where(.sysweb-empty-state) {
	box-sizing: border-box;
	padding: 28px 16px;
	color: var(--sysweb-color-muted);
	text-align: center;
}

/*
 * Feedback assíncrono compartilhado. O host conserva sua geometria e o painel
 * cobre somente a superfície em processamento, sem deslocar o formulário.
 */
:where(.sysweb-ui-scope) :where(.sysweb-processing-host) {
	position: relative;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing) {
	/* Superfície neutra/escura, independente do tema da página. */
	--sysweb-color-surface: #142337;
	--sysweb-color-ink: #fff;
	--sysweb-color-muted: #dbe8f6;
	--sysweb-color-line: #52677b;
	--sysweb-color-primary: #8acdf5;
	--sysweb-color-primary-hover: #b6e1fc;
	--sysweb-color-success: #a2dfb5;
	--sysweb-color-danger: #ffb2b2;
	--sysweb-radius: 12px;
	position: absolute;
	z-index: 20;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	padding: 18px;
	border-radius: inherit;
	background: rgba(8, 13, 20, .72);
	backdrop-filter: blur(2px);
}

:where(.sysweb-ui-scope) :where(.sysweb-processing[hidden]) {
	display: none;
}

/* Opt-in para formulários cujo envio bloqueia a navegação da página. */
:where(.sysweb-ui-scope) :where(.sysweb-processing--page) {
	position: fixed;
	z-index: 11000;
	border-radius: 0;
	overflow: auto;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__panel) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 12px;
	box-sizing: border-box;
	width: 100%;
	max-width: 430px;
	padding: 18px;
	border: 1px solid var(--sysweb-color-line);
	border-radius: var(--sysweb-radius);
	background: var(--sysweb-color-surface);
	box-shadow: 0 8px 28px rgba(24, 55, 68, .16);
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__spinner) {
	grid-row: 1 / span 2;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 3px solid #cfe1e9;
	border-top-color: var(--sysweb-color-primary);
	border-radius: 50%;
	animation: sysweb-processing-spin .8s linear infinite;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing.is-success .sysweb-processing__spinner) {
	border: 0;
	color: var(--sysweb-color-success, #287243);
	animation: none;
	transform: none;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing.is-success .sysweb-processing__spinner)::before {
	content: '\2713';
	display: block;
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing.is-error .sysweb-processing__spinner) {
	border: 0;
	color: var(--sysweb-color-danger);
	animation: none;
	transform: none;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing.is-error .sysweb-processing__spinner)::before {
	content: '!';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-weight: 800;
	line-height: 1;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__message) {
	min-width: 0;
	color: var(--sysweb-color-ink);
	font-size: 15px;
	line-height: 1.35;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__detail) {
	min-width: 0;
	color: var(--sysweb-color-muted);
	font-size: 12px;
	line-height: 1.45;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__progress-wrap, .sysweb-processing__actions) {
	grid-column: 1 / -1;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__progress-wrap) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42px;
	align-items: center;
	gap: 9px;
	margin-top: 4px;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__progress-wrap[hidden], .sysweb-processing__actions[hidden]) {
	display: none;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__progress) {
	width: 100%;
	height: 10px;
	accent-color: var(--sysweb-color-primary);
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__percent) {
	color: var(--sysweb-color-ink);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

:where(.sysweb-ui-scope) :where(.sysweb-processing__actions) {
	margin-top: 4px;
	text-align: right;
}

/* Superfície de entrega de arquivo; posicionamento pertence ao consumidor. */
.sysweb-ui-scope .sysweb-file-download {
	padding: 14px;
	box-shadow: 0 8px 28px rgba(24, 55, 68, .2);
}

.sysweb-ui-scope .sysweb-file-download[hidden],
.sysweb-ui-scope .sysweb-file-download [hidden] {
	display: none;
}

.sysweb-file-download .sysweb-file-download__name {
	display: block;
	margin-bottom: 8px;
	overflow-wrap: anywhere;
}

.sysweb-file-download .sysweb-file-download__status {
	min-height: 170px;
}

.sysweb-file-download .sysweb-file-download__message {
	margin: 0;
	line-height: 1.5;
}

.sysweb-file-download .sysweb-processing {
	padding: 0;
	background: transparent;
	backdrop-filter: none;
}

.sysweb-file-download .sysweb-processing__panel {
	padding: 12px;
	box-shadow: none;
}

.sysweb-file-download .sysweb-actions {
	margin-top: 10px;
}

.sysweb-file-download .sysweb-btn:disabled {
	opacity: .55;
	cursor: wait;
}

@keyframes sysweb-processing-spin {
	to {
		transform: rotate(360deg);
	}
}

:where(.sysweb-ui-scope) :where(.sysweb-pagination) {
	padding: 12px 14px;
	border-top: 1px solid var(--sysweb-color-soft-line);
}

:where(.sysweb-ui-scope) :where(.sysweb-pagination__items) {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

:where(.sysweb-ui-scope) :where(.sysweb-pagination__ellipsis) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	color: var(--sysweb-color-muted);
}

@media (max-width: 760px) {
	:where(.sysweb-ui-scope) :where(.sysweb-toolbar, .sysweb-field) {
		align-items: stretch;
	}

	:where(.sysweb-ui-scope) :where(.sysweb-input, .sysweb-select, .sysweb-btn:not(.sysweb-btn-compact)) {
		min-height: var(--sysweb-touch-target);
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.sysweb-ui-scope) :where(.sysweb-btn, .sysweb-input, .sysweb-select, .sysweb-processing__spinner) {
		animation: none !important;
		transition: none !important;
	}
}

.sysweb-brand-logo {
	display: block;
	width: auto !important;
	height: auto;
	max-width: 180px;
	max-height: 44px !important;
	object-fit: contain;
}

@media (max-width: 560px) {
	.sysweb-brand-logo {
		max-width: 145px;
		max-height: 36px !important;
	}
}

.sysweb-help-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(255, 196, 0, .22);
}

.sysweb-help-button:hover,
.sysweb-help-button:focus {
	color: #fff;
	text-decoration: none;
}

.sysweb-help-button:focus {
	outline: 3px solid #176d98;
	outline-offset: 1px;
}

.sysweb-help-button:focus:not(:focus-visible) {
	outline: none;
}

.sysweb-help-button:focus-visible {
	outline: 3px solid #176d98;
	outline-offset: 1px;
}

.sysweb-help-button__face {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid #bd8b00;
	border-radius: 7px;
	background: linear-gradient(180deg, #ffcf31, #efb300);
	box-shadow: 0 2px 4px rgba(88, 61, 0, .2);
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	transition: background .14s ease, box-shadow .14s ease;
}

.sysweb-help-button:hover .sysweb-help-button__face,
.sysweb-help-button:focus .sysweb-help-button__face {
	background: linear-gradient(180deg, #ffda55, #e6aa00);
	box-shadow: 0 3px 6px rgba(88, 61, 0, .28);
}

.sysweb-help-button__mark {
	position: relative;
	z-index: 2;
	display: inline-block;
}

.sysweb-help-button:hover .sysweb-help-button__mark,
.sysweb-help-button:focus .sysweb-help-button__mark {
	animation: sysweb-help-button-bounce .34s ease-out 1;
}

@keyframes sysweb-help-button-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	42% {
		transform: translateY(-2px);
	}

	72% {
		transform: translateY(1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sysweb-help-button__face,
	.sysweb-help-button__mark {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* Auto-refresh reutilizável: o comportamento fica em js/sysweb-auto-refresh.js. */
.sysweb-auto-refresh {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.sysweb-auto-refresh__select {
	min-height: 42px;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 30px 8px 10px;
	border: 1px solid #cbd9df;
	border-radius: 9px;
	background: #fff;
	color: #29404a;
	font: 14px/1.2 Arial, Helvetica, sans-serif;
}

.sysweb-auto-refresh__countdown {
	display: inline-block;
	min-width: 132px;
	color: #667982;
	font: 12px/1.2 Arial, Helvetica, sans-serif;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 680px) {
	.sysweb-auto-refresh {
		width: 100%;
	}

	.sysweb-auto-refresh__select {
		flex: 1 1 230px;
		min-height: 44px;
	}
}

/* Ponte de paleta: somente padrões comuns Bootstrap 2, sem trocar layout,
 * plugins ou engine. Componentes customizados continuam no CSS do módulo. */
body.sysweb-visual-dark > .container { background: transparent; }
body.sysweb-visual-dark :where(a:not([class])) { color: var(--sysweb-color-primary); }
body.sysweb-visual-dark :where(a:not([class])):hover { color: var(--sysweb-color-primary-hover); }
body.sysweb-visual-dark :where(.muted, .help-block, .help-inline, .sysweb-visual-menu-title) { color: var(--sysweb-color-muted); }
body.sysweb-visual-dark :where(.well, .modal, .modal-header, .modal-footer, .dropdown-menu) {
	background: var(--sysweb-color-surface);
	color: var(--sysweb-color-ink);
	border-color: var(--sysweb-color-line);
	text-shadow: none;
	box-shadow: var(--sysweb-shadow-surface);
}
body.sysweb-visual-dark :where(.modal-footer, .sysweb-visual-menu-divider) { border-color: var(--sysweb-color-line); }
body.sysweb-visual-dark :where(.modal-backdrop) { background: var(--sysweb-color-overlay); }
body.sysweb-visual-dark :where(.close) { color: var(--sysweb-color-ink); text-shadow: none; opacity: .85; }
body.sysweb-visual-dark.sysweb-engine-legacy :where(label, legend, fieldset, .table, .table th, .table td) {
	color: var(--sysweb-color-ink);
	border-color: var(--sysweb-color-line);
}
body.sysweb-visual-dark.sysweb-engine-legacy :where(.table th) { background: var(--sysweb-color-secondary); }
body.sysweb-visual-dark.sysweb-engine-legacy .table-striped tbody > tr:nth-child(odd) > :where(td, th) { background: var(--sysweb-color-stripe); }
body.sysweb-visual-dark.sysweb-engine-legacy .table-hover tbody tr:hover > :where(td, th) { background: var(--sysweb-color-hover); }
body.sysweb-visual-dark :where(input:not([type=button]):not([type=submit]):not([type=reset]), textarea, select, .sysweb-input, .sysweb-select, .sysweb-auto-refresh__select) {
	background-color: var(--sysweb-color-input);
	color: var(--sysweb-color-ink);
	border-color: var(--sysweb-color-line);
	box-shadow: none;
}
body.sysweb-visual-dark :where(input, textarea)::placeholder { color: var(--sysweb-color-muted); opacity: 1; }
body.sysweb-visual-dark :where(input, select, textarea):disabled { background-color: var(--sysweb-color-disabled); color: var(--sysweb-color-muted); }
body.sysweb-visual-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--sysweb-color-focus); }
body.sysweb-visual-dark :where(.sysweb-auto-refresh__countdown) { color: var(--sysweb-color-muted); }
body.sysweb-visual-dark :where(.btn) {
	background: var(--sysweb-color-elevated);
	color: var(--sysweb-color-ink);
	border-color: var(--sysweb-color-line);
	text-shadow: none;
	box-shadow: none;
}
body.sysweb-visual-dark :where(.btn:hover, .btn:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus) { background: var(--sysweb-color-hover); color: var(--sysweb-color-ink); }
body.sysweb-visual-dark :where(.dropdown-menu > li > a) { color: var(--sysweb-color-ink); }
body.sysweb-visual-dark :where(.btn-primary, .btn-info) { background: var(--sysweb-color-primary-fill); color: #fff; }
body.sysweb-visual-dark :where(.btn-danger, .alert-error, .alert-danger) { background: var(--sysweb-color-danger-bg); color: var(--sysweb-color-danger); border-color: var(--sysweb-color-danger-line); }
body.sysweb-visual-dark :where(.btn-success, .alert-success) { background: var(--sysweb-color-success-bg); color: var(--sysweb-color-success); }
body.sysweb-visual-dark :where(.alert, .btn-warning) { text-shadow: none; }
body.sysweb-visual-dark :where(.alert:not(.alert-success):not(.alert-error):not(.alert-danger):not(.alert-info), .btn-warning) { background: var(--sysweb-color-warning-bg); color: var(--sysweb-color-warning-ink); border-color: var(--sysweb-color-warning-line); }
body.sysweb-visual-dark :where(.alert-info) { background: var(--sysweb-color-info-bg); color: var(--sysweb-color-info); }
body.sysweb-visual-dark :where(.btn.disabled, .btn:disabled, .sysweb-btn:disabled) { opacity: .55; cursor: default; }

/* Select2 3 legado e 4.0.13: inclui o dropdown que o plugin anexa ao body. */
body.sysweb-visual-dark :is(.select2-choice, .select2-choices, .select2-selection, .select2-drop, .select2-dropdown, .select2-search input, .select2-choice .select2-arrow) {
	background: var(--sysweb-color-input);
	color: var(--sysweb-color-ink);
	border-color: var(--sysweb-color-line);
	box-shadow: none;
}
body.sysweb-visual-dark :is(.select2-selection__rendered, .select2-choice .select2-chosen) { color: var(--sysweb-color-ink); }
body.sysweb-visual-dark :is(.select2-selection__placeholder, .select2-default, .select2-results__option[aria-disabled=true]) { color: var(--sysweb-color-muted); }
body.sysweb-visual-dark .select2-container--default .select2-results__option[aria-selected=true] { background: var(--sysweb-color-active); color: var(--sysweb-color-ink); }
body.sysweb-visual-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
body.sysweb-visual-dark .select2-results .select2-highlighted { background: var(--sysweb-color-primary-fill); color: #fff; }
body.sysweb-visual-dark .select2-container--disabled .select2-selection,
body.sysweb-visual-dark .select2-container-disabled .select2-choice { background: var(--sysweb-color-disabled); }
body.sysweb-visual-dark .select2-selection__arrow b { border-top-color: var(--sysweb-color-muted); }
body.sysweb-visual-dark .select2-container--open .select2-selection__arrow b { border-top-color: transparent; border-bottom-color: var(--sysweb-color-muted); }
/* O Select2 3 copia a classe do select para o wrapper: não duplicar sua seta. */
body.sysweb-visual-dark .select2-container.sysweb-select { background-image: none; }
/* Na versão 3.3.2 a área da seta é um div sem classe .select2-arrow. */
body.sysweb-visual-dark .select2-choice > div {
	background: transparent;
	border-color: var(--sysweb-color-line);
}
body.sysweb-visual-dark .select2-choice > div > b {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -5px 0 0 -4px;
	/* O sprite retina do CSS legado usa !important. */
	background-image: none !important;
	border: solid var(--sysweb-color-muted);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
body.sysweb-visual-dark .select2-dropdown-open .select2-choice > div > b { margin-top: -1px; transform: rotate(225deg); }
/* A seta do adaptador usa o mesmo tom discreto dos ícones Select2. */
body.sysweb-visual-dark .sysweb-select {
	--sysweb-bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9b9c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* O alvo de toque de 44px não se aplica aos originais escondidos dos plugins. */
body :is(input, select).select2-offscreen,
body select.select2-hidden-accessible {
    width: 1px !important; height: 1px !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; border: 0 !important;
}