/* ==========================================================================
   DESIGN SYSTEM — biblioteca de componentes institucional / neo-brutalista
   ==========================================================================
   Constrói inteiramente sobre os tokens de tokens.css (cor de marca segue
   sendo --success, já usada em toda a aplicação — nenhuma paleta nova).
   Só a GEOMETRIA muda entre os dois modos (html.design-institutional /
   html.design-brutalist): raio, espessura de borda, sombra e tipografia.

   Duas partes:
   1. Componentes novos e nomeados (.ds-*) — vocabulário canônico para telas
      novas e para a migração gradual das páginas existentes.
   2. Retrofit de alcance amplo — aplica a MESMA geometria aos componentes
      já existentes no app (painéis, badges, pills, KPIs, abas, tabelas,
      modais — nenhum deles hoje respondia à troca de design) via seletor
      de atributo, sem precisar renomear classe em nenhum template. Usa
      !important deliberadamente: é a técnica que o próprio design de
      referência neo-brutalista usa para uma camada de tema que precisa
      vencer estilo já escrito por página.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. BOTÃO
   ------------------------------------------------------------------------- */
.ds-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--control-h);
	padding: 0 16px;
	border: var(--border-w) solid transparent;
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text-2);
	font: inherit;
	font-weight: 650;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
		color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .16s var(--ease-out);
}
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ds-btn--primary { background: var(--brand); color: var(--text-on-accent); border-color: var(--brand); }
.ds-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.ds-btn--secondary { background: var(--surface); color: var(--text-2); border-color: var(--border-hi); }
.ds-btn--secondary:hover { background: var(--hover-bg); color: var(--text); }
.ds-btn--ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.ds-btn--ghost:hover { background: var(--hover-bg); color: var(--text); }
.ds-btn--danger { background: var(--danger); color: var(--text-on-accent); border-color: var(--danger); }
.ds-btn--danger:hover { background: var(--danger-hi); border-color: var(--danger-hi); }
.ds-btn--sm { min-height: 32px; padding: 0 12px; font-size: 12px; }
.ds-btn--lg { min-height: 48px; padding: 0 20px; font-size: 14px; }
.ds-btn--block { width: 100%; }
.ds-btn--icon { width: var(--control-h); padding: 0; }

/* -------------------------------------------------------------------------
   2. CARD
   ------------------------------------------------------------------------- */
.ds-card {
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	overflow: hidden;
}
.ds-card__header {
	padding: 14px 16px;
	border-bottom: var(--border-w) solid var(--border);
	background: var(--surface-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.ds-card__body { padding: 16px; }
.ds-card__footer {
	padding: 14px 16px;
	border-top: var(--border-w) solid var(--border);
	background: var(--surface-2);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
}
.ds-card--hover { transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); cursor: pointer; }
.ds-card--hover:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }

/* -------------------------------------------------------------------------
   3. BADGE / TAG
   ------------------------------------------------------------------------- */
.ds-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 22px;
	padding: 0 9px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}
.ds-badge--brand { background: var(--brand-bg); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
.ds-badge--ok { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 24%, transparent); }
.ds-badge--warn { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 24%, transparent); }
.ds-badge--danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 24%, transparent); }
.ds-badge--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 24%, transparent); }
.ds-badge--neutral { background: var(--surface-2); color: var(--muted); border-color: var(--border); }

.ds-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	padding: 0 10px;
	border: var(--border-w) solid var(--border-hi);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text-2);
	font-size: 12px;
	font-weight: 650;
}
.ds-tag.is-active { background: var(--brand); border-color: var(--brand); color: var(--text-on-accent); }

/* -------------------------------------------------------------------------
   4. MÉTRICA / KPI
   ------------------------------------------------------------------------- */
.ds-metric {
	padding: 16px;
	border: var(--border-w) solid var(--border);
	border-left: 3px solid var(--brand);
	border-radius: var(--radius-md);
	background: var(--surface);
	display: grid;
	gap: 6px;
}
.ds-metric--warning { border-left-color: var(--warning); }
.ds-metric--danger { border-left-color: var(--danger); }
.ds-metric--info { border-left-color: var(--info); }
.ds-metric__label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ds-metric__value { font-size: 26px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.ds-metric__meta { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.ds-metric__meta--up { color: var(--success); }
.ds-metric__meta--down { color: var(--danger); }

/* -------------------------------------------------------------------------
   5. TABELA
   ------------------------------------------------------------------------- */
.ds-table-wrap {
	overflow-x: auto;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
}
.ds-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.ds-table th, .ds-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.ds-table thead th { background: var(--surface-2); color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ds-table tbody tr:hover { background: var(--hover-bg); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table td.num, .ds-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   6. MODAL
   ------------------------------------------------------------------------- */
.ds-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(var(--bg-rgb), .6);
	backdrop-filter: blur(var(--backdrop-blur-soft));
}
.ds-modal-backdrop.is-open { display: flex; }
.ds-modal {
	width: min(560px, 100%);
	max-height: min(88vh, 760px);
	overflow: auto;
	border: var(--border-w) solid var(--border-hi);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
}
.ds-modal__header, .ds-modal__footer {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--surface-2);
}
.ds-modal__header { border-bottom: var(--border-w) solid var(--border); }
.ds-modal__footer { border-top: var(--border-w) solid var(--border); justify-content: flex-end; }
.ds-modal__body { padding: 16px; }

/* -------------------------------------------------------------------------
   7. ALERTA
   ------------------------------------------------------------------------- */
.ds-alert {
	display: flex;
	gap: 11px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	line-height: 1.4;
}
.ds-alert strong { display: block; margin-bottom: 2px; }
.ds-alert--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 24%, transparent); }
.ds-alert--ok { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 24%, transparent); }
.ds-alert--warn { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 24%, transparent); }
.ds-alert--danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 24%, transparent); }

/* -------------------------------------------------------------------------
   8. CAMPO DE FORMULÁRIO
   ------------------------------------------------------------------------- */
.ds-field { display: grid; gap: 5px; min-width: 0; }
.ds-field > label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.ds-field .ds-hint { color: var(--muted); font-size: 11px; }
.ds-field .ds-error { color: var(--danger); font-size: 11px; display: none; }
.ds-field.is-invalid .ds-error { display: block; }
.ds-input, .ds-select, .ds-textarea {
	width: 100%;
	min-height: var(--control-h);
	padding: 9px 11px;
	border: var(--border-w) solid var(--border-hi);
	border-radius: var(--radius-md);
	background: var(--control-bg);
	color: var(--text);
	font: inherit;
	transition: border-color .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.ds-textarea { min-height: 92px; resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: 0; border-color: var(--brand); box-shadow: var(--focus-ring); }
.ds-field.is-invalid :is(.ds-input, .ds-select, .ds-textarea) { border-color: var(--danger); }

/* -------------------------------------------------------------------------
   9. ABAS / SEGMENTADO
   ------------------------------------------------------------------------- */
.ds-tabs { display: flex; gap: var(--space-4); border-bottom: var(--border-w) solid var(--border); overflow-x: auto; }
.ds-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 2px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--muted);
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
}
.ds-tab:hover { color: var(--text); }
.ds-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.ds-segmented {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-2);
}
.ds-segmented button {
	min-height: 30px;
	padding: 0 12px;
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-weight: 650;
	font-size: 12px;
}
.ds-segmented button.is-active { background: var(--brand); color: var(--text-on-accent); }

/* -------------------------------------------------------------------------
   10. ESTADO VAZIO
   ------------------------------------------------------------------------- */
.ds-empty {
	display: grid;
	place-items: center;
	gap: 8px;
	min-height: 160px;
	padding: 24px;
	border: 1px dashed var(--border-hi);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	text-align: center;
	color: var(--muted);
}
.ds-empty strong { color: var(--text); font-size: 14px; }

/* -------------------------------------------------------------------------
   11. ACORDEÃO (details/summary nativo)
   ------------------------------------------------------------------------- */
.ds-accordion { border: var(--border-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.ds-accordion summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 0 14px;
	font-weight: 650;
	color: var(--text);
}
.ds-accordion summary::-webkit-details-marker { display: none; }
.ds-accordion summary::after { content: "+"; color: var(--muted); font-size: 18px; }
.ds-accordion[open] summary { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ds-accordion[open] summary::after { content: "\2212"; }
.ds-accordion__body { padding: 14px; color: var(--text-2); line-height: 1.5; }

/* ==========================================================================
   NEO-BRUTALISTA — camada aplicada só aos componentes .ds-*
   Raio zero (já garantido pelos tokens), borda espessa em tinta sólida,
   sombra dura sem blur, tipografia pesada em caixa alta nos rótulos de
   ação, efeito de "pressionar" no botão (sombra recolhe no clique).
   ========================================================================== */
html.design-brutalist .ds-card,
html.design-brutalist .ds-metric,
html.design-brutalist .ds-table-wrap,
html.design-brutalist .ds-modal,
html.design-brutalist .ds-alert,
html.design-brutalist .ds-empty,
html.design-brutalist .ds-accordion {
	box-shadow: var(--shadow-sm);
}
html.design-brutalist .ds-modal { box-shadow: var(--shadow-lg); }
html.design-brutalist .ds-card--hover:hover,
html.design-brutalist .ds-accordion:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }

html.design-brutalist .ds-btn,
html.design-brutalist .ds-tag,
html.design-brutalist .ds-segmented button.is-active {
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: var(--shadow-sm);
	transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background .12s var(--ease-out);
}
html.design-brutalist .ds-btn:hover,
html.design-brutalist .ds-tag:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }
html.design-brutalist .ds-btn:active { box-shadow: none; transform: translate(3px, 3px); }
html.design-brutalist .ds-btn--ghost { box-shadow: none; }
html.design-brutalist .ds-btn--ghost:hover { box-shadow: none; transform: none; background: var(--hover-bg); }

html.design-brutalist .ds-badge { font-weight: 800; letter-spacing: .03em; }

html.design-brutalist h1,
html.design-brutalist h2,
html.design-brutalist h3,
html.design-brutalist h4 {
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

/* ==========================================================================
   RETROFIT DE ALCANCE AMPLO — mesma geometria aplicada aos componentes já
   existentes no app (nomes próprios por página: .panel-card, .admin-card,
   .observatory-kpi, .feiras-tab-pill, .official-modal, .app-dialog, ...).
   Seletor de atributo por substring evita ter que enumerar/renomear cada
   um dos ~40 templates; !important é necessário e deliberado aqui, pois é
   uma camada de tema que precisa vencer o CSS específico de cada página.
   Cobre botão/chip, cartão/painel, badge/pill, KPI, aba, tabela e modal —
   os mesmos sete grupos de componente mapeados no design-system.css acima.
   ========================================================================== */
html.design-brutalist :is(
	[class*="card" i],
	[class*="panel" i],
	[class*="kpi" i],
	[class*="badge" i],
	[class*="pill" i],
	[class*="chip" i],
	[class*="tab" i],
	[class*="btn" i],
	[class*="table" i],
	[class*="modal" i],
	[class*="dialog" i],
	[class*="strip" i],
	[class*="notice" i],
	[class*="filter" i],
	.form-action,
	.page-header,
	#modal,
	#modal-overlay
):not(.icon):not(svg):not(path) {
	border-radius: 0 !important;
}
html.design-brutalist :is(
	[class*="card" i], [class*="panel" i], [class*="badge" i], [class*="pill" i],
	[class*="chip" i], [class*="tab" i], [class*="btn" i], [class*="table" i], [class*="modal" i],
	[class*="dialog" i], [class*="strip" i], [class*="notice" i], [class*="filter" i],
	.form-action, .page-header, #modal, #modal-overlay
) {
	border-color: var(--border-hi) !important;
}
html.design-brutalist :is(
	.panel-card, .admin-card, .flash-card, [class*="-panel"], .std-panel, .std-strip-item,
	[class*="kpi"], .observatory-kpi, .ds-metric,
	[class*="table"], .ds-table-wrap,
	[class*="modal"], .app-dialog, #modal, #modal-overlay,
	.dashboard-filters, .aters-source-panel, .page-header
) {
	border-width: var(--border-w) !important;
	box-shadow: var(--shadow-sm) !important;
}
html.design-brutalist :is([class*="badge" i], [class*="pill" i], [class*="chip" i], [class*="btn" i], .form-action) {
	border-width: var(--border-w) !important;
	font-weight: 800 !important;
	letter-spacing: .03em !important;
	box-shadow: var(--shadow-sm) !important;
}
html.design-brutalist :is([class*="tab" i]):not([class*="table" i]) {
	font-weight: 800 !important;
	letter-spacing: .02em !important;
}
html.design-brutalist :is([class*="btn" i], .form-action):not(:disabled):hover {
	box-shadow: var(--shadow-sm) !important;
	transform: translate(-1px, -1px);
}
html.design-brutalist :is([class*="btn" i], .form-action):not(:disabled):active {
	box-shadow: none !important;
	transform: translate(1px, 1px);
}