/* ============================================================================
   MODULO 02/8 - app/02-base-casca.css (ex-app.css linhas 63-1268). Base + casca (layout, sidebar, topbar, menu), componentes core, login e responsivo inicial. A ORDEM DE INCLUSAO 01->08 E CRITICA - nao reordenar.
   ============================================================================ */
/* =========================
   BASE
========================= */
* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
	font-family: 'Inter', "Segoe UI", Arial, sans-serif;
	background: var(--bm-bg);
	color: var(--bm-text);
	overflow-x: hidden;
}

body .ui-widget {
	font-family: 'Inter', "Segoe UI", Arial, sans-serif;
}

a {
	text-decoration: none;
}

#mainForm {
	margin: 0;
	padding: 0;
}

.menu-toggle-check {
	display: none;
}

/* =========================
   LAYOUT
========================= */
.layout {
	display: flex;
	width: 100%;
	min-height: 100vh;
	background: var(--bm-bg);
}

/* ===== App-shell: menu + header FIXOS; só o conteúdo rola ===== */
html, body, .app-body { height: 100%; }
/* Altura do banner de impersonação ("vendo como tenant"). 0 quando não há banner; ~40px quando há.
   O .layout desconta isso para NÃO ultrapassar a viewport (senão banner + 100vh estoura → header não fixa). */
:root { --bm-impers-h: 0px; }
body.app-body.bm-impersonando { --bm-impers-h: 40px; }
.layout { height: calc(100vh - var(--bm-impers-h, 0px)); overflow: hidden; }  /* a página não rola; quem rola é o .content */
.sidebar { height: 100vh; }                              /* menu sempre cheio (acompanha a tela) */
.content { height: 100vh; overflow-y: auto; overflow-x: hidden; }  /* o conteúdo rola aqui dentro */
/* topbar gruda no topo do conteúdo que rola (já é position:sticky no tema) */
.content > .topbar { position: sticky; top: 0; z-index: 30; }

/* =========================
   SIDEBAR
========================= */
.sidebar {
	width: var(--sidebar-width);
	min-width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	height: 100vh;
	background: #ffffff;
	border-right: 1px solid var(--bm-border);
	position: sticky;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 20;
	transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease;
}

.sidebar-header {
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 14px 14px 18px;
	border-bottom: 1px solid var(--bm-border);
	background: #ffffff;
}

.logo {
	max-width: 185px;
	max-height: 82px;
	object-fit: contain;
	transition: opacity 0.2s ease, width 0.2s ease;
}

.menu-toggle-btn, .top-menu-toggle {
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bm-primary);
	cursor: pointer;
	transition: 0.2s;
}

.menu-toggle-btn:hover, .top-menu-toggle:hover {
	background: var(--bm-primary-light);
}

.sidebar-scroll {
	height: calc(100vh - 84px);
	overflow-y: auto;
	overflow-x: hidden;
}

/* =========================
   CONTENT
========================= */
.content {
	flex: 1;
	min-width: 0;
	min-height: 100vh;
	padding: 24px;
	background: var(--bm-bg);
}

/* =========================
   TOPBAR
========================= */
.topbar {
	position: sticky;
	top: 0;
	z-index: 60;
	width: 100%;
	background: var(--bm-surface);
	border: 0;
	border-bottom: 1px solid var(--bm-border);
	border-radius: 0;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
	padding: 8px 20px;
	margin: 0 0 16px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.page-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--bm-text);
	line-height: 1.15;
}

.muted {
	color: var(--bm-muted);
	font-size: 14px;
	margin-top: 3px;
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.user-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--bm-text);
	white-space: nowrap;
}

/* =========================
   ACCORDION MENU PRIMEFACES
========================= */
.sidebar-accordion, .sidebar-accordion.ui-accordion {
	border: none !important;
	background: transparent !important;
}

.sidebar-accordion .ui-accordion-header {
	margin: 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--bm-border) !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: var(--bm-text) !important;
	box-shadow: none !important;
	overflow: hidden;
}

.sidebar-accordion .ui-accordion-header a {
	display: flex !important;
	align-items: center;
	min-height: 58px;
	padding: 0 18px !important;
	color: var(--bm-text) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.25;
}

.sidebar-accordion .ui-accordion-header.ui-state-active,
	.sidebar-accordion .ui-accordion-header.ui-state-hover {
	background: var(--bm-primary-light) !important;
}

.sidebar-accordion .ui-accordion-header.ui-state-active a,
	.sidebar-accordion .ui-accordion-header.ui-state-hover a {
	color: var(--bm-primary-dark) !important;
}

.sidebar-accordion .ui-accordion-content {
	padding: 6px 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--bm-border) !important;
	background: #ffffff !important;
}

.sidebar-accordion .ui-icon, .sidebar-accordion .pi {
	color: var(--bm-primary) !important;
}

/* links internos do menu */
.menu-link {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	color: var(--bm-primary);
	font-size: 14px;
	font-weight: 500;
	transition: 0.2s;
}

/* Início solto no topo do menu (fora dos agrupadores) */
.menu-solo {
	margin: 2px 0 8px;
	font-weight: 700;
}

.menu-link:hover {
	background: var(--bm-primary-light);
	color: var(--bm-primary-dark);
}

.menu-link i {
	width: 18px;
	text-align: center;
	font-size: 14px;
}

/* =========================
   FIX FINAL - MENU RECOLHIDO
========================= */
.menu-toggle-check:checked ~ .layout .sidebar {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	overflow: hidden !important;
}

.menu-toggle-check:checked ~ .layout .sidebar-header {
	width: 60px !important;
	padding: 14px 0 !important;
	justify-content: center !important;
}

.menu-toggle-check:checked ~ .layout .sidebar .logo {
	display: none !important;
}

/* força todos os headers do accordion a não renderizar texto */
.menu-toggle-check:checked ~ .layout .sidebar-accordion .ui-accordion-header
	{
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	height: 56px !important;
	padding: 0 !important;
	overflow: hidden !important;
	position: relative !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-indent: -9999px !important;
}

/* esconde qualquer título/texto que o PrimeFaces gere */
.menu-toggle-check:checked ~ .layout .sidebar-accordion .ui-accordion-header-title,
	.menu-toggle-check:checked ~ .layout .sidebar-accordion .ui-accordion-header a,
	.menu-toggle-check:checked ~ .layout .sidebar-accordion .ui-accordion-header span:not(.ui-icon):not(.pi)
	{
	display: none !important;
}

/* cria um ícone fixo para o módulo */
.menu-toggle-check:checked ~ .layout .sidebar-accordion .ui-accordion-header::before
	{
	content: "\e92d";
	font-family: "primeicons";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: var(--bm-primary);
	font-size: 17px;
	text-indent: 0;
	line-height: 1;
}

/* conteúdo interno do accordion */
.menu-toggle-check:checked ~ .layout .sidebar-accordion .ui-accordion-content
	{
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	padding: 4px 0 !important;
	overflow: hidden !important;
}

/* itens internos: mostra só ícone */
.menu-toggle-check:checked ~ .layout .menu-link {
	width: 60px !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

.menu-toggle-check:checked ~ .layout .menu-link .menu-text {
	display: none !important;
}

.menu-toggle-check:checked ~ .layout .menu-link i {
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	font-size: 15px !important;
}

/* =========================
   CARDS / PAINÉIS
========================= */
.bm-card, .card, .dashboard-card, .ui-panel {
	background: var(--bm-surface) !important;
	border: 1px solid var(--bm-border) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow);
	padding: 20px;
	margin-bottom: 22px;
}

.ui-panel .ui-panel-titlebar {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--bm-border) !important;
	padding: 0 0 12px 0 !important;
	margin-bottom: 14px;
}

.card-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px;
}

/* =========================
   DASHBOARD
========================= */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 22px;
}

.metric-card {
	background: #fff;
	border: 1px solid var(--bm-border);
	border-left: 5px solid var(--bm-primary);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 20px;
	min-width: 0;
}

.metric-label {
	font-size: 13px;
	color: var(--bm-muted);
	margin-bottom: 8px;
}

.metric-value {
	font-size: 28px;
	font-weight: 800;
	color: var(--bm-primary);
}

/* =========================
   FORMULÁRIOS
========================= */
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.form-group {
	margin-bottom: 16px;
}

.form-group label, .ui-outputlabel {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--bm-text);
	margin-bottom: 6px;
}

input, textarea, .ui-inputfield, .ui-selectonemenu, .ui-calendar input {
	max-width: 100%;
	border: 1px solid var(--bm-border) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	color: var(--bm-text) !important;
	background: #ffffff !important;
}

input, textarea, .ui-inputfield {
	padding: 9px 11px !important;
}

.ui-selectonemenu {
	min-height: 39px;
}

.ui-selectonemenu .ui-selectonemenu-label {
	padding: 9px 34px 9px 11px !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
	border-left: 1px solid var(--bm-border) !important;
	background: #fff !important;
	border-radius: 0 8px 8px 0 !important;
}

input:focus, textarea:focus, .ui-inputfield:focus {
	border-color: var(--bm-primary) !important;
	box-shadow: 0 0 0 3px rgba(38, 50, 122, 0.15) !important;
	outline: none;
}

/* =========================
   BOTÕES
========================= */
.ui-button, .btn {
	border: none !important;
	border-radius: 8px !important;
	padding: 9px 15px !important;
	font-weight: 600 !important;
	transition: 0.2s;
}

.ui-button {
	background: var(--bm-primary) !important;
	color: #fff !important;
}

.ui-button:hover {
	background: var(--bm-primary-dark) !important;
}

.ui-button-secondary {
	background: var(--bm-primary) !important;
	color: #fff !important;
}

.ui-button-secondary:hover {
	background: var(--bm-primary-dark) !important;
}

/* =========================
   TABELAS
========================= */
.ui-datatable {
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow);
}

.ui-datatable table {
	width: 100%;
	border-collapse: collapse;
}

.ui-datatable thead th {
	background: var(--bm-primary) !important;
	color: #fff !important;
	border-color: var(--bm-primary-dark) !important;
	padding: 11px 12px !important;
	font-size: 13px;
	font-weight: 700 !important;
}

.ui-datatable tbody td {
	padding: 10px 12px !important;
	border-color: var(--bm-border) !important;
	font-size: 14px;
}

.ui-datatable tbody tr:hover {
	background: var(--bm-primary-light) !important;
}

.ui-datatable .ui-paginator {
	background: #fff !important;
	border-color: var(--bm-border) !important;
	padding: 10px !important;
}

/* =========================
   MENSAGENS
========================= */
.ui-messages {
	margin-bottom: 18px !important;
}

.ui-messages, .ui-message {
	border-radius: 8px !important;
}

/* =========================
   TABS / DIALOGS
========================= */
.ui-tabs {
	border: 1px solid var(--bm-border) !important;
	border-radius: var(--radius) !important;
	background: #fff !important;
	box-shadow: var(--shadow);
}

.ui-tabs .ui-tabs-nav {
	background: #f8fafc !important;
	border-bottom: 1px solid var(--bm-border) !important;
}

.ui-tabs .ui-tabs-panel {
	padding: 20px !important;
}

.ui-dialog {
	border-radius: var(--radius) !important;
	overflow: hidden;
}

.ui-dialog-titlebar {
	background: var(--bm-primary) !important;
	color: #fff !important;
	border: none !important;
}

/* =========================
   BADGES
========================= */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.badge-success, .badge-active {
	background: #dcfce7;
	color: #166534;
}

.badge-danger, .badge-inactive {
	background: #fee2e2;
	color: #991b1b;
}

.badge-warning {
	background: #fef3c7;
	color: #92400e;
}

.badge-info {
	background: #dbeafe;
	color: #1e40af;
}

/* =========================
   LOGIN - BMCode Premium
========================= */
.login-body {
	margin: 0;
	height: 100vh;
	background: #f8fafc;
	color: #0f172a;
	/* a tela de autenticação NÃO rola: cada coluna se vira dentro de 100vh (ver overflow por coluna) */
	overflow: hidden;
}

.login-shell {
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
}

.login-left {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 42px 56px 32px;
	color: #ffffff;
	background: radial-gradient(circle at 18% 12%, rgba(59, 91, 219, 0.28),
		transparent 34%),
		linear-gradient(145deg, #020617 0%, #081225 45%, #111b47 100%);
	overflow: hidden; /* SEM scroll: o conteúdo do hero é comprimido/ocultado por altura p/ sempre caber */
}

.login-left::before {
	content: "";
	position: absolute;
	width: 580px;
	height: 580px;
	right: -220px;
	top: 120px;
	border: 1px solid rgba(96, 165, 250, 0.16);
	border-radius: 42px;
	transform: rotate(32deg);
}

.login-left::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -180px;
	bottom: -130px;
	border: 1px solid rgba(96, 165, 250, 0.10);
	border-radius: 42px;
	transform: rotate(32deg);
}

.login-top, .login-content, .login-left-footer {
	position: relative;
	z-index: 1;
}

.login-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.login-logo-modern {
	width: 250px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.login-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(99, 102, 241, 0.36);
	background: rgba(30, 41, 100, 0.42);
	color: #8ea2ff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Voltar (cadastro → login) */
.login-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 18px;
	color: var(--bm-muted, #64748b);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}
.login-back:hover { color: var(--bm-primary, #4650D4); }
.login-back i { font-size: 12px; }

.login-content {
	max-width: 650px;
	margin-top: 42px;
}

.login-content h1 {
	margin: 0 0 6px;
	font-size: 34px;
	line-height: 1.18;
	font-weight: 500;
	letter-spacing: -0.4px;
	color: #ffffff;
	text-wrap: balance;
}

.login-content p {
	max-width: 560px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #d8deea;
}

.login-features {
	display: grid;
	gap: 14px;
	margin-top: 26px;
}

.login-feature {
	display: grid;
	grid-template-columns: 50px 1fr;
	align-items: center;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.login-feature:last-child {
	border-bottom: none;
}

.feature-icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(59, 91, 219, 0.15);
	border: 1px solid rgba(99, 102, 241, 0.20);
	color: #7c93ff;
	font-size: 18px;
}

.login-feature strong {
	display: block;
	margin-bottom: 3px;
	color: #ffffff;
	font-size: 14.5px;
	font-weight: 500;
}

.login-feature span {
	display: block;
	color: #cbd5e1;
	font-size: 13px;
	line-height: 1.45;
}

.login-left-footer {
	margin-top: 40px;
}

.social-links-modern {
	display: flex;
	align-items: center;
	gap: 52px;
	flex-wrap: wrap;
}

.social-links-modern a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #d7deec;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: 0.2s ease;
}

.social-links-modern i {
	font-size: 22px;
	color: #d7deec;
}

.social-links-modern a:hover, .social-links-modern a:hover i {
	color: #ffffff;
}

.login-copy {
	margin-top: 28px;
	color: #aab4c5;
	font-size: 14px;
}

.login-right {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px;
	overflow: hidden; /* SEM scroll: o card de auth é curto e comprimido por altura p/ caber sempre */
	background: radial-gradient(circle at 65% 22%, rgba(38, 50, 122, 0.08),
		transparent 32%),
		linear-gradient(145deg, #ffffff 0%, #f8fafc 48%, #eef2f7 100%);
}

.login-card-modern {
	width: 100%;
	max-width: 560px;
	padding: 42px 42px 38px;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(203, 213, 225, 0.82);
	box-shadow: 0 34px 90px rgba(15, 23, 42, 0.14);
	backdrop-filter: blur(18px);
}

.login-card-header h2 {
	margin: 0;
	font-size: 22px;
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.4px;
	color: var(--tenka-navy, #2B2F6E);
}

.login-card-header p {
	margin: 10px 0 28px;
	color: #64748b;
	font-size: 13px;
}

.field-group {
	margin-bottom: 24px;
}

.field-group label {
	display: block;
	margin-bottom: 7px;
	color: #0f172a;
	font-size: 13px;
	font-weight: 700;
}

.input-with-icon {
	position: relative;
}

.input-with-icon>i {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	color: #64748b;
	font-size: 16px;
}

.input-with-icon .login-input {
	width: 100% !important;
	height: 48px;
	padding: 0 16px 0 46px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	font-size: 14px !important;
	box-shadow: none !important;
	transition: 0.2s ease;
}

.input-with-icon .login-input:focus {
	border-color: #26327a !important;
	box-shadow: 0 0 0 4px rgba(38, 50, 122, 0.12) !important;
}

.login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 4px 0 32px;
}

.remember-me {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #334155;
	font-size: 13px;
	cursor: pointer;
}

.remember-me input {
	width: 18px;
	height: 18px;
	accent-color: #26327a;
}

.login-options a {
	color: #1d2b8f;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.login-options a:hover {
	text-decoration: underline;
}

.login-button-modern {
	width: 100% !important;
	height: 48px;
	border: none !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, #4650D4 0%, #3A43B8 100%) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	box-shadow: 0 18px 38px rgba(38, 50, 122, 0.28) !important;
	transition: 0.2s ease;
}

.login-button-modern:hover {
	transform: translateY(-1px);
	background: linear-gradient(135deg, #3A43B8 0%, #2E369B 100%) !important;
	box-shadow: 0 22px 44px rgba(70, 80, 212, 0.34) !important;
}

/* Assinatura Tenka fixa no rodapé da sidebar — teto em currentColor adapta a claro/escuro.
   Os 3 blocos (índigo/índigo-claro/cinza) são visíveis sobre qualquer fundo. */
.sidebar-tenka-sig {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 10px;
	margin-top: auto;
	border-top: 1px solid rgba(148, 163, 184, 0.16);
	/* cinza da marca (3º quadrado do símbolo): legível na sidebar clara — antes era branco 0.55,
	   que sumia no fundo claro (só aparecia no hover/selecionado). Fica ok no tema escuro também. */
	color: #6D7076;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.4px;
	white-space: nowrap;
	overflow: hidden;
}
.sidebar-tenka-sig svg { flex: 0 0 auto; }
.sidebar-tenka-sig .sidebar-tenka-word { line-height: 1; }
/* no menu recolhido, some o wordmark e centraliza só o símbolo */
.menu-toggle-check:checked ~ .layout .sidebar-tenka-sig .sidebar-tenka-word { display: none; }

/* Título de SEÇÃO padrão (canônico) para telas-painel/dashboards — unifica o visual dos títulos de
   tabela/card que hoje variam (cfg-card-title / cd-section-title / plano-distrib-header). Ícone com
   acento da marca. Adote esta classe nas seções dos painéis para consistência. */
.bm-section-title { font-size: 14px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.bm-section-title i { color: #4650D4; }

.login-card-modern .ui-messages {
	margin-bottom: 22px !important;
}

/* =========================
   LOGIN RESPONSIVO
   Só empilha (1 coluna) em telas ESTREITAS (<=820, tablet-retrato/celular), onde rolar a auth é
   natural. Entre 821 e 1100 (landscape baixo, ex.: 1024x600) mantém 2 colunas → o card de auth
   fica na própria coluna, centrado e SEM scroll (ver overflow por coluna + media de altura).
========================= */
@media ( max-width : 820px) {
	.login-body {
		overflow: auto;
	}
	.login-shell {
		grid-template-columns: 1fr;
	}
	.login-left {
		padding: 42px 28px;
	}
	.login-top {
		justify-content: center;
		flex-wrap: wrap;
	}
	.login-content {
		margin: 52px auto 0;
		text-align: center;
	}
	.login-content h1 {
		font-size: 38px;
	}
	.login-content p {
		margin: 0 auto;
	}
	.login-feature {
		text-align: left;
	}
	.social-links-modern {
		justify-content: center;
		gap: 28px;
	}
	.login-copy {
		text-align: center;
	}
	.login-right {
		padding: 42px 24px;
	}
	.login-card-modern {
		max-width: 560px;
		padding: 40px 28px;
	}
}

@media ( max-width : 640px) {
	.login-logo-modern {
		width: 220px;
	}
	.login-content h1 {
		font-size: 32px;
	}
	.login-feature {
		grid-template-columns: 56px 1fr;
		gap: 16px;
	}
	.feature-icon {
		width: 52px;
		height: 52px;
		font-size: 20px;
	}
	.login-options {
		align-items: flex-start;
		flex-direction: column;
	}
	.login-card-header h2 {
		font-size: 30px;
	}
}

/* ===== Tela de autenticação: ADAPTA POR ALTURA para CABER sem scroll (monitores baixos 768/720/600) ===== */
@media ( max-height : 860px) {
	.login-left { padding: 26px 48px !important; justify-content: flex-start !important; }
	.login-top { gap: 12px; }
	.login-content { margin-top: 16px !important; }
	.login-content h1 { font-size: 26px !important; }
	.login-content p { font-size: 13.5px !important; line-height: 1.5 !important; }
	.login-features { gap: 8px !important; margin-top: 12px !important; }
	.login-feature { padding-bottom: 8px !important; }
	.feature-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; }
	.login-pills { margin-top: 12px !important; }
	.login-right { padding: 24px !important; }
	.login-card-modern { padding: 24px 30px !important; }
	.login-card-header h2 { font-size: 24px !important; }
	.login-card-header p { font-size: 13px !important; }
}
@media ( max-height : 680px) {
	/* MANTÉM as features (o valor da tela) — comprime em vez de esconder; some só pills + rodapé */
	.login-pills, .login-left-footer { display: none !important; }
	.login-content { margin-top: 8px !important; }
	.login-content h1 { font-size: 21px !important; }
	.login-content p { margin-bottom: 6px !important; font-size: 12.5px !important; line-height: 1.45 !important; }
	.login-features { gap: 5px !important; margin-top: 8px !important; }
	.login-feature { padding-bottom: 5px !important; grid-template-columns: 40px 1fr !important; gap: 10px !important; }
	.login-feature span { font-size: 11px !important; line-height: 1.35 !important; }
	.feature-icon { width: 34px !important; height: 34px !important; font-size: 14px !important; }
	/* card comprimido p/ CABER inteiro (incl. "Criar conta") sem clipar em telas baixas */
	.login-card-modern { padding: 16px 24px !important; }
	.login-card-header { margin-bottom: 6px !important; }
	.login-card-header p { display: none !important; }
	.field-group { margin-bottom: 8px !important; }
	.login-input, .input-with-icon input { height: 40px !important; }
	.login-options { margin: 6px 0 !important; }
	.login-button-modern { padding: 9px !important; margin-top: 4px !important; }
	.login-divider { margin: 8px 0 !important; }
	.login-version { display: none !important; }
}

/* =========================
   UTILITÁRIOS
========================= */
.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.text-muted {
	color: var(--bm-muted);
}

.w-100 {
	width: 100%;
}

/* =========================
   RESPONSIVO
========================= */
@media ( max-width : 1100px) {
	.dashboard-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.topbar {
		align-items: flex-start;
		flex-direction: column;
	}
	.topbar-actions {
		width: 100%;
	}
}

@media ( max-width : 900px) {
	.login-page {
		grid-template-columns: 1fr;
		padding: 32px 20px;
		gap: 28px;
	}
	.login-brand {
		text-align: center;
		margin: 0 auto;
	}
	.login-brand .login-logo {
		margin-left: auto;
		margin-right: auto;
		max-width: 280px;
	}
	.social-links {
		justify-content: center;
	}
	.login-card {
		max-width: 100%;
	}
}

@media ( max-width : 768px) {
	.layout {
		display: block;
	}
	.sidebar {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		height: auto;
		min-height: auto;
		position: relative;
	}
	.sidebar-header {
		height: 86px;
	}
	.logo {
		max-width: 220px;
		max-height: 60px;
	}
	.sidebar-scroll {
		height: auto;
		max-height: none;
	}
	.content {
		min-height: auto;
		padding: 14px;
	}
	.topbar {
		padding: 14px;
	}
	.topbar-actions {
		flex-direction: column;
		align-items: stretch !important;
	}
	.topbar-actions .ui-selectonemenu, .topbar-actions .ui-button {
		width: 100% !important;
	}
	.form-grid, .dashboard-grid {
		grid-template-columns: 1fr;
	}
	.menu-toggle-check:checked ~ .layout .sidebar {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}
	.menu-toggle-check:checked ~ .layout .sidebar-scroll {
		display: none;
	}
	.menu-toggle-check:checked ~ .layout .sidebar .logo {
		opacity: 1;
		width: auto;
		max-width: 220px;
	}
}