/*#region */
/*#endregion*/

:root {
	--wd-sidebar: 200px;
	--wd-sidebar-sw: 80px;
	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/*#region config*/
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-thumb {
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	background-color: var(--color-primary);
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

html {
	font-family: var(--font);
	font-size: 14px;
	position: relative;
	min-height: 100%;
}
hr {
	margin: 0.5rem 0 !important;
}
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-control-sm:focus,
.form-check-input:focus,
.form-select-sm:focus,
.form-select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}
.btn.active {
	color: white !important;
	background-color: var(--color-primary) !important;
}

.btn-custom-hover:hover {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}
.btn-custom-bg-hover:hover {
	color: var(--color-text-light) !important;
	background-color: var(--color-primary) !important;
}
body {
	overflow: hidden;
}

	.overflow-auto {
		overflow: auto !important;
		overflow-x: hidden !important;
	}

	.modal-body {
		max-height: 60vh;
		overflow-y: auto;
	}

	.container-custom {
		width: calc(100% - 85px);
		margin-left: 85px;
		margin-top: 15px;
	}

	.card {
		border-radius: 1rem;
	}

	.fa {
		display: contents !important;
	}

.fa-calendar {
	cursor: pointer;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	color: var(--bs-nav-pills-link-active-color) !important;
	background-color: var(--color-primary) !important;
}

/*#region Badges & fundos "subtle" (guia visual §14)
   Bootstrap 5.2 não traz bg-*-subtle; implementação com tinta translúcida,
   funciona sobre superfícies claras e escuras. O par com texto legível no
   tema escuro fica nas regras .badge abaixo. */
.bg-primary-subtle {
	background-color: color-mix(in srgb, var(--color-primary, #99582A) 15%, transparent) !important;
}

.bg-success-subtle {
	background-color: rgba(25, 135, 84, .15) !important;
}

.bg-warning-subtle {
	background-color: rgba(255, 193, 7, .16) !important;
}

.bg-danger-subtle {
	background-color: rgba(220, 53, 69, .14) !important;
}

.bg-info-subtle {
	background-color: rgba(13, 202, 240, .15) !important;
}

.bg-secondary-subtle {
	background-color: rgba(108, 117, 125, .16) !important;
}

.badge.bg-primary-subtle {
	color: var(--color-primary-600, #7A4622) !important;
}

[data-theme="dark"] .badge.bg-primary-subtle {
	background-color: color-mix(in srgb, var(--color-primary, #99582A) 28%, transparent) !important;
	color: var(--color-primary-200, #E6AB85) !important;
}

[data-theme="dark"] .badge.bg-success-subtle {
	color: #75b798 !important;
}

[data-theme="dark"] .badge.bg-warning-subtle {
	color: #ffda6a !important;
}

[data-theme="dark"] .badge.bg-danger-subtle {
	color: #ea868f !important;
}

[data-theme="dark"] .badge.bg-info-subtle {
	color: #6edff6 !important;
}

[data-theme="dark"] .badge.bg-secondary-subtle {
	background-color: rgba(255, 255, 255, .08) !important;
	color: var(--color-text-secondary, #a0a3a8) !important;
}
/*#endregion*/

/*#region CustomerOrder*/
.customer-order-all-page-hidden {
	display: none !important;
}

.customer-order-page-hidden {
	display: none !important;
}

.customer-order-filter-hidden {
	display: none !important;
}
/*#endregion*/
/*#region dropdown do autocomplete*/
.ui-autocomplete {
    background-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 4px 0 !important;
    max-height: 250px !important; /* controla overflow */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 16px !important; /* tamanho da fonte */
    color: #333 !important;
	z-index: 3000 !important;
}

.ui-menu-item-wrapper {
    padding: 10px 14px !important;
    color: #333 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* corta texto grande com ... */
    font-size: 17px !important; /* ajuste individual */
}

.ui-state-active {
    background-color: #605757 !important;
    color: #ffffff !important;
    border: none !important;
}

@media (max-width: 576px) {
	#modal .ui-autocomplete {
		max-height: 40vh !important;
	}

	#modal .ui-menu-item-wrapper {
		white-space: normal !important;
		word-break: break-word !important;
		line-height: 1.25 !important;
	}
}

/* ── Theme-aware text utilities (adapta claro/escuro) ── */
.text-contrast {
	color: var(--bs-body-color) !important;
}

.text-contrast-muted {
	color: #6c757d !important;
}


/*#endregion*/
/*#region select2*/

/* ── Campo (input) ─────────────────────────────────────────────── */
.select2-container .select2-selection--single {
    height: var(--f-h, 52px) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 38px 0 12px !important;
    border-radius: var(--f-r, 10px) !important;
    background-color: var(--color-surface) !important;
    border: 1.5px solid var(--color-border) !important;
    font-family: var(--font) !important;
    font-size: 0.875rem !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 0.3s ease !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(153, 88, 42, 0.13) !important;
    outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary) !important;
    line-height: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    font-family: var(--font) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-secondary) !important;
    opacity: 0.75 !important;
    font-weight: 400 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--f-h, 52px) !important;
    top: 0 !important;
    right: 10px !important;
    width: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text-secondary) transparent transparent transparent !important;
    opacity: 0.65;
    transition: border-color 160ms ease !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-primary) transparent !important;
    opacity: 1;
}

/* ── Painel do dropdown ─────────────────────────────────────────── */
.select2-dropdown {
    background-color: var(--color-surface) !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06) !important;
    font-family: var(--font) !important;
    overflow: hidden;
    margin-top: 4px !important;
}
.select2-dropdown--above {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

/* ── Campo de busca dentro do dropdown ─────────────────────────── */
.select2-search--dropdown {
    padding: 8px 8px 4px !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--color-border) !important;
    border-radius: 7px !important;
    padding: 7px 10px !important;
    font-size: 0.82rem !important;
    font-family: var(--font) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(153, 88, 42, 0.13) !important;
    outline: none !important;
}

/* ── Lista de resultados ────────────────────────────────────────── */
.select2-results__options {
    max-height: 220px !important;
    overflow-y: auto !important;
    padding: 4px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}
.select2-results__options::-webkit-scrollbar        { width: 4px; }
.select2-results__options::-webkit-scrollbar-thumb  { background: var(--color-primary); border-radius: 999px; }
.select2-results__options::-webkit-scrollbar-track  { background: transparent; }

/* ── Itens ──────────────────────────────────────────────────────── */
.select2-results__option {
    padding: 8px 10px !important;
    border-radius: 7px !important;
    font-size: 0.855rem !important;
    font-weight: 500 !important;
    font-family: var(--font) !important;
    color: var(--color-text-primary) !important;
    transition: background-color 150ms ease, color 150ms ease !important;
    cursor: pointer !important;
    margin: 1px 0 !important;
}

/* Hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(153, 88, 42, 0.08) !important;
    color: var(--color-text-primary) !important;
}

/* Item selecionado */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}
/* Hover sobre item já selecionado */
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background-color: var(--color-primary-600, #7A4622) !important;
    color: #ffffff !important;
}

/* Itens desabilitados */
.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--color-text-secondary) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
}

/* Rótulos de grupo */
.select2-results__group {
    padding: 6px 10px 3px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--color-text-secondary) !important;
    font-family: var(--font) !important;
}

/* Mensagem "nenhum resultado" */
.select2-results__option.select2-results__option--disabled {
    color: var(--color-text-secondary) !important;
    opacity: 0.65 !important;
    font-style: italic !important;
    cursor: default !important;
    text-align: center !important;
    background-color: transparent !important;
}

/*#endregion*/

/*#endregion*/

/*#region Login*/
.login-background {
	position: relative;
	background-image: url('/images/background-login.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.login-background::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.12); /* overlay transparente porém mais escuro */
	pointer-events: none;
	z-index: 1;
}
	/* Card de login atualizado com glassmorphism */
	.card-login {
		position: relative;
		z-index: 3; /* acima do overlay */
		width: 420px !important;
		background: rgba(255,255,255,0.06);
		border: 1px solid rgba(255,255,255,0.08);
		backdrop-filter: blur(8px) saturate(120%);
		-webkit-backdrop-filter: blur(8px) saturate(120%);
		box-shadow: 0 8px 24px rgba(11, 15, 20, 0.45);
		padding: 1.25rem;
	}

	.card-login h2 { margin: 0; font-weight: 800; color: var(--color-body-dark-bg); }
	.card-login .form-control {
		--login-input-bg: rgba(0,0,0,0.54);
		--login-input-border: rgba(255,255,255,0.08);
		background: var(--login-input-bg) !important; /* mais escuro para melhor legibilidade */
		border: 1px solid var(--login-input-border) !important;
		color: #ffffff !important;
		transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
		background-clip: padding-box; /* ajuda a evitar que o navegador pinte fora do padding */
	}
	.card-login .form-control::placeholder { color: rgba(255,255,255,0.65); }
	.card-login .form-control:focus {
		background: rgba(0,0,0,0.50);
		border-color: color-mix(in srgb, var(--color-primary) 60%, white 40%);
		box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-primary) 18%, transparent);
		color: #ffffff;
	}

	/* Mantem a mesma cor padrao do input quando o navegador preenche automaticamente */
	.card-login #account input.form-control:-webkit-autofill,
	.card-login #account input.form-control:-webkit-autofill:focus,
	.card-login #account input.form-control:-webkit-autofill:hover,
	.card-login #account input.form-control:-webkit-autofill:active {
		-webkit-text-fill-color: #ffffff !important;
		color: #ffffff !important;
		caret-color: #ffffff !important;
		background-color: var(--login-input-bg) !important;
		border: 1px solid var(--login-input-border) !important;
		/* inset box-shadow sobrescreve o fundo aplicado pelo navegador */
		-webkit-box-shadow: 0 0 0 1000px var(--login-input-bg) inset !important;
		box-shadow: 0 0 0 1000px var(--login-input-bg) inset !important;
		-webkit-background-clip: padding-box !important;
		background-clip: padding-box !important;
		transition: background-color 9999s ease-out 0s, color 9999s ease-out 0s !important;
	}

	/* Firefox autofill */
	input:-moz-autofill,
	.card-login .form-control:-moz-autofill {
		box-shadow: 0 0 0px 1000px rgba(0,0,0,0.54) inset !important;
		-moz-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.54) inset !important;
		-webkit-text-fill-color: #ffffff !important;
		color: #ffffff !important;
		background-color: rgba(0,0,0,0.54) !important;
	}
	.card-login .form-label { color: rgba(255,255,255,0.95); }
	.card-login .btn-primary {
		/* Usar tom mais escuro e totalmente opaco para evitar aparência de transparência */
		background: var(--color-primary) !important;
		background-color: var(--color-primary) !important;
		background-image: none !important;
		opacity: 1 !important;
		color: #000 !important;
		border: 1px solid var(--color-primary) !important;
		padding: 0.9rem 1.25rem;
		font-size: 1.05rem;
		font-weight: 600;
		box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
		position: relative !important;
		z-index: 2 !important;
		isolation: isolate !important;
		mix-blend-mode: normal !important;
		background-blend-mode: normal !important;
		filter: none !important;
	}
	.card-login .btn-primary:hover {
		transform: translateY(-2px);
		background: var(--color-primary) !important;
		box-shadow: 0 10px 24px rgba(0,0,0,0.6) !important;
	}
	.card-login .btn-primary:active {
		transform: translateY(0);
		box-shadow: 0 6px 12px rgba(0,0,0,0.6) !important;
	}
	.card-login .btn-primary:focus-visible {
		outline: none;
		box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
	}

	/* Password toggle (ícone dentro do input) */
	.password-toggle-wrapper { position: relative; }
	.password-toggle-wrapper .password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: rgba(255,255,255,0.95); padding: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
	.password-toggle-wrapper .password-toggle:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); border-radius: 6px; }
	.password-toggle-wrapper .form-control { padding-right: 44px; }

	/* Logo e título personalizados no card de login */
	.card-login .login-logo {
		width: 64px;
		height: 64px;
		object-fit: contain;
		border-radius: 8px;
		display: block;
	}

	.card-login .login-title {
		font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
		font-weight: 900;
		font-size: 1.75rem;
		margin: 0.25rem 0 0.6rem 0;
		color: var(--color-body-dark-bg);
		letter-spacing: 0.02em;
		text-transform: none;
		text-shadow: 0 1px 0 rgba(255,255,255,0.15);
	}

	/* Label do checkbox 'Lembrar-me' mais legível: preto e negrito */
	.card-login .checkbox .form-label {
		color: #000000 !important;
		font-weight: 500 !important;
	}

	/* Mantém compatibilidade com estilos antigos de input/button se ainda usados */
	.btn-password {
		background-color: #fff;
		border-top: 1px solid #ced4da;
		border-bottom: 1px solid #ced4da;
		border-right: 1px solid #ced4da;
	}

	.btn-password:hover, .icon-password:hover, .btn-password:focus {
		font-weight: 700;
		box-shadow: none !important;
	}

	.input-password:focus {
		box-shadow: none !important;
		border-top: 1px solid #ced4da;
		border-bottom: 1px solid #ced4da;
		border-left: 1px solid #ced4da;
		border-right: none;
	}

	/* Responsividade */
	@media (max-width: 767px) {
		.card-login { width: calc(100% - 2rem) !important; padding: 1rem; }
	}
	/*#endregion*/
	/*#region nav*/
	.nav-content {
		top: 5px;
		left: 10px;
		margin-left: var(--wd-sidebar);
		margin-right: 15px;
	}

		.nav-content.active {
			margin-left: var(--wd-sidebar-sw);
		}

	#navbarBody {
		border-radius: 8px;
	}
	/*#endregion*/
	/*#region Dropdown*/
	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		width: 180px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		border-radius: 5px;
	}

		.dropdown-content a {
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
		}

			.dropdown-content a:hover {
				background-color: #f1f1f1;
				cursor: pointer;
			}

	.dropdown:hover .dropdown-content {
		display: block;
	}
	/*#endregion*/
	/*#region Sidebar*/
	#sidebar {
		position: fixed;
		top: 5px;
		bottom: 5px;
		left: 5px;
		background-color: var(--color-primary);
		transition: all 0.3s;
		width: var(--wd-sidebar);
		min-width: var(--wd-sidebar-sw);
		border-radius: 16px;
		display: flex;
		flex-direction: column;
		z-index: 1000;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
	}

		#sidebar.active {
			width: 75px;
		}

	#content {
		margin-left: 210px;
		transition: all 0.3s;
	}

		#content.active {
			margin-left: 100px;
		}

	/* ── Logo ──────────────────────────────────────────────────── */
	.nav-sb-logo {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
		color: #fff;
		text-decoration: none;
		font-family: var(--font);
		font-weight: 800;
		font-size: 1rem;
		white-space: nowrap;
		overflow: hidden;
		flex-shrink: 0;
		transition: color 0.15s ease;
	}

	.nav-sb-logo:hover { color: rgba(255, 255, 255, 0.85); text-decoration: none; }

	#sidebar.active .nav-sb-logo {
		justify-content: center;
		padding: 14px 0;
	}

	#sidebar.active .nav-sb-logo .nav-sb-label { display: none; }

	/* ── Links ──────────────────────────────────────────────────── */
	.nav-sb-link {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 2px 8px;
		padding: 8px 12px;
		border-radius: 10px;
		color: rgba(255, 255, 255, 0.75);
		text-decoration: none;
		font-family: var(--font);
		font-size: 0.875rem;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		transition: background 0.15s ease, color 0.15s ease;
		width: calc(100% - 16px);
	}

	.nav-sb-link i {
		font-size: 15px;
		flex-shrink: 0;
		width: 18px;
		text-align: center;
	}

	/* Sino de notificações: âncora do contador sobreposto ao ícone.
	   Absoluto em relação ao sino (não ao link) → segue o ícone tanto na
	   sidebar aberta quanto na colapsada, sem empurrar o layout. */
	.nav-sb-bell {
		position: relative;
		flex-shrink: 0;
		display: inline-flex;
		justify-content: center;
	}

	.nav-sb-bell-badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 15px;
		height: 15px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--color-danger, #dc3545);
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		line-height: 15px;
		text-align: center;
		pointer-events: none;
	}

	.nav-sb-link .nav-sb-label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-sb-link:hover,
	.nav-sb-link:focus {
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
		text-decoration: none;
	}

	/* Estado ativo: pílula branca */
	.nav-sb-link--active {
		background: #fff;
		color: var(--color-primary) !important;
		font-weight: 700;
	}

	.nav-sb-link--active:hover,
	.nav-sb-link--active:focus {
		background: rgba(255, 255, 255, 0.92);
		color: var(--color-primary) !important;
		text-decoration: none;
	}

	/* Colapsado: ícone centralizado */
	#sidebar.active .nav-sb-link {
		justify-content: center;
		padding: 10px 0;
	}

	#sidebar.active .nav-sb-link .nav-sb-label { display: none; }

	/* Ativo colapsado: anel translúcido */
	#sidebar.active .nav-sb-link--active {
		background: rgba(255, 255, 255, 0.22);
		color: #fff !important;
	}

	/* ── Grupos / Separadores ───────────────────────────────────── */
	.nav-sb-group {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	@media (min-width: 768px) {
		.nav-sb-group + .nav-sb-group {
			border-top: 1px solid rgba(255, 255, 255, 0.15);
			padding-top: 4px;
			margin-top: 4px;
		}
	}

	.nav-sb-divider {
		height: 1px;
		background: rgba(255, 255, 255, 0.18);
		margin: 6px 16px;
		flex-shrink: 0;
	}

	/* ── Footer ─────────────────────────────────────────────────── */
	.nav-sb-footer {
		margin-top: auto;
		padding-top: 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		flex-shrink: 0;
	}

	/* ── Toggle Button ──────────────────────────────────────────── */
	.sidebar-toggle-btn {
		position: absolute;
		right: -14px;
		top: 50px;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background-color: var(--color-primary);
		border: 2px solid rgba(255, 255, 255, 0.3);
		color: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1001;
		transition: all 0.25s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		padding: 0;
		font-size: 0.75rem;
	}

	.sidebar-toggle-btn:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	}

	.sidebar-toggle-btn i {
		transition: transform 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#sidebar.active .sidebar-toggle-btn i {
		transform: rotate(180deg);
	}

	/*#endregion*/

	/*#region Stock Dashboard*/
	.stock-dashboard .tracking-wide {
		letter-spacing: 0.025em;
	}

	.stock-dashboard .hover-lift {
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.stock-dashboard .hover-lift:hover {
		transform: translateY(-4px);
		box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
	}

	.stock-dashboard .bg-primary.bg-opacity-10 {
		background-color: rgba(13, 110, 253, 0.1) !important;
	}

	.stock-dashboard .bg-secondary.bg-opacity-10 {
		background-color: rgba(108, 117, 125, 0.1) !important;
	}

	.stock-dashboard .bg-success.bg-opacity-10 {
		background-color: rgba(25, 135, 84, 0.1) !important;
	}

	.stock-dashboard .bg-info.bg-opacity-10 {
		background-color: rgba(13, 202, 240, 0.1) !important;
	}

	.stock-dashboard .bg-warning.bg-opacity-10 {
		background-color: rgba(255, 193, 7, 0.1) !important;
	}

	.stock-dashboard .bg-danger.bg-opacity-10 {
		background-color: rgba(220, 53, 69, 0.1) !important;
	}

	.stock-dashboard .bg-dark.bg-opacity-10 {
		background-color: rgba(33, 37, 41, 0.1) !important;
	}

	.stock-dashboard .bg-purple {
		background-color: #6f42c1;
	}

	.stock-dashboard .bg-purple.bg-opacity-10 {
		background-color: rgba(111, 66, 193, 0.1) !important;
	}

	.stock-dashboard .stock-chart-wrap {
		min-height: 260px;
		width: 100%;
	}

	.sensitive-toggle-btn {
		line-height: 1;
		font-size: 1.15rem;
		width: 2rem;
		height: 2rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
	}

	.sensitive-toggle-btn:hover,
	.sensitive-toggle-btn:focus {
		color: var(--color-primary) !important;
		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
		transform: scale(1.06);
		text-decoration: none;
	}

	.sensitive-toggle-btn:focus,
	.sensitive-toggle-btn:active,
	.sensitive-toggle-btn:active:focus {
		border-color: transparent !important;
		box-shadow: none !important;
		outline: none !important;
	}

	.sensitive-toggle-btn:focus-visible {
		color: var(--color-primary) !important;
		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
		box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--color-primary) 22%, white) !important;
	}

	.stock-sensitive-chart-placeholder {
		min-height: 260px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #6c757d;
		border: 1px dashed rgba(108, 117, 125, 0.35);
		border-radius: 0.75rem;
		background-color: rgba(248, 249, 250, 0.8);
	}

	.stock-sensitive-chart-placeholder i {
		font-size: 1.5rem;
	}

	.stock-dashboard .badge {
		transition: all 0.2s;
	}

	.stock-dashboard .btn {
		transition: all 0.2s;
	}

	.stock-dashboard .table-responsive::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.stock-dashboard .table-responsive::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.stock-dashboard .table-responsive::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 3px;
	}

	.stock-dashboard .table-responsive::-webkit-scrollbar-thumb:hover {
		background: #a8a8a8;
	}

	.stock-dashboard .sticky-top {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	@media (max-width: 768px) {
		.stock-dashboard .stock-chart-wrap {
			min-height: 200px;
		}

		.stock-dashboard .input-group {
			width: 100% !important;
		}
	}
	/*#endregion*/
	/*#region Button*/
	.btn-search {
		background-color: var(--color-primary);
		border-bottom-right-radius: 0.25rem;
	}

	.btn-add-register {
		cursor: pointer;
		color: var(--color-success);
	}

		.btn-add-register:hover {
			color: #1aac45;
		}

	.btn-remove-register {
		cursor: pointer;
		color: var(--color-danger);
	}

		.btn-remove-register:hover {
			color: #c82333;
		}

	.btn-modal {
		background-color: var( --color-nav-dark-font)
	}
	/*#endregion*/
	/*#region Snackbar*/
	#snackbar {
		visibility: hidden;
		min-width: 250px;
		margin-left: -125px;
		background-color: #333;
		font-family: var(--font);
		font-weight: 800;
		color: #fff;
		text-align: center;
		border-radius: 5px;
		padding: 16px;
		position: fixed;
		z-index: 1;
		left: 90%;
		bottom: 30px;
	}

		#snackbar.show {
			visibility: visible;
			-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
			animation: fadein 0.5s, fadeout 0.5s 2.5s;
		}

	@-webkit-keyframes fadein {
		from {
			bottom: 0;
			opacity: 0;
		}

		to {
			bottom: 30px;
			opacity: 1;
		}
	}

	@keyframes fadein {
		from {
			bottom: 0;
			opacity: 0;
		}

		to {
			bottom: 30px;
			opacity: 1;
		}
	}

	@-webkit-keyframes fadeout {
		from {
			bottom: 30px;
			opacity: 1;
		}

		to {
			bottom: 0;
			opacity: 0;
		}
	}

	@keyframes fadeout {
		from {
			bottom: 30px;
			opacity: 1;
		}

		to {
			bottom: 0;
			opacity: 0;
		}
	}

	#progress-bar {
		width: 100%;
		height: 5px;
		background-color: #ccc;
		margin-top: 8px;
		border-radius: 5px;
		display: none;
	}

		#progress-bar.active {
			display: block;
		}

	#progress-bar-inner {
		height: 100%;
		background-color: var(--color-success);
		width: 0;
		border-radius: 5px;
		transition: width 0.001s ease-in-out;
	}
	/*#endregion*/
	/*#region Switches toggle*/
	.toggle {
		--width: 52px; /* use .toggle-sm / .toggle-lg para variar */
		--height: 28px;
		--knob: 22px;
		--bg-off: #e5e7eb; /* cinza quando desligado */
		--bg-on: #22c55e; /* verde quando ligado */
		--ring: rgba(0,0,0,.18); /* sombra externa */
		--inset: rgba(0,0,0,.20); /* sombra interna */
		--inset-strong: rgba(0,0,0,.28); /* mais forte para relevo */
		--knob-shadow: rgba(0,0,0,.35);
		display: inline-flex;
		align-items: center;
		gap: .5rem;
	}

	.toggle-sm {
		--width: 40px;
		--height: 22px;
		--knob: 18px;
	}

	.toggle-lg {
		--width: 64px;
		--height: 34px;
		--knob: 28px;
	}

	.toggle-input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		pointer-events: none;
	}

	.toggle-label {
		position: relative;
		width: var(--width);
		height: var(--height);
		cursor: pointer;
		border-radius: 999px;
		display: inline-block;
		transition: background-color .22s ease, box-shadow .22s ease;
		/* fundo (desligado) com leve gradiente e sombras (inner + outer) */
		background: linear-gradient(to bottom, #fafafa, var(--bg-off));
		box-shadow: 0 2px 6px var(--ring), /* outer */
		inset 0 1px 2px var(--inset), /* inner suave topo */
		inset 0 -1px 2px var(--inset-strong); /* inner forte base */
	}

	.toggle-input:focus-visible + .toggle-label {
		outline: 2px solid #60a5fa;
		outline-offset: 2px;
	}

	.toggle-input:checked + .toggle-label {
		background: linear-gradient(to bottom, #44d07a, var(--bg-on));
		box-shadow: 0 2px 8px var(--ring), inset 0 1px 2px rgba(255,255,255,.25), inset 0 -1px 3px rgba(0,0,0,.25);
	}

	.toggle-knob {
		position: absolute;
		top: 50%;
		left: 3px;
		width: var(--knob);
		height: var(--knob);
		transform: translateY(-50%);
		border-radius: 50%;
		background: #fff;
		transition: left .22s ease, box-shadow .22s ease;
		box-shadow: 0 2px 4px var(--knob-shadow), /* outer */
		inset 0 1px 1px rgba(0,0,0,.06); /* inner sutil no bot�o */
	}

	.toggle-input:checked + .toggle-label .toggle-knob {
		left: calc(var(--width) - var(--knob) - 3px);
		box-shadow: 0 3px 6px var(--knob-shadow), inset 0 1px 1px rgba(0,0,0,.06);
	}

	.toggle-text {
		font-size: .9rem;
		user-select: none;
	}

	.toggle-label .state-on,
	.toggle-label .state-off {
		display: none;
	}

	.toggle-input:checked ~ .toggle-text .state-on {
		display: inline;
	}

	.toggle-input:checked ~ .toggle-text .state-off {
		display: none;
	}

	.toggle-input:not(:checked) ~ .toggle-text .state-off {
		display: inline;
	}
	/* Variante �esqueleto� para usar sobre fundos escuros */
	.toggle-outline .toggle-label {
		background: linear-gradient(to bottom, #f4f4f5, #ddd);
	}
	/*#endregion*/

	/* item-title e item-menu mantidos para compatibilidade com Warehouse, Payroll, _Navbar */
	.item-title {
		font-family: var(--font);
		font-weight: 800;
		font-size: 1.5rem;
		text-align: center;
		color: var(--color-body-dark-bg);
		border-radius: 10px;
	}

		.item-title:hover {
			color: var(--color-body-dark-bg);
		}

	.item-menu {
		font-family: var(--font);
		font-weight: 400;
		font-size: 1rem;
		padding: 1rem;
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		text-align: left;
		color: var(--color-body-dark-bg);
		border-radius: 10px;
	}

		.item-menu span {
			flex: 1;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.item-menu:hover, .item-menu:focus {
			background-color: var(--color-nav-item-hover);
			color: var(--color-body-dark-bg);
		}

	/* Dentro do footer do sidebar, item-menu herda o estilo nav-sb-link */
	.nav-sb-footer .item-menu,
	.nav-sb-footer .nav-link.item-menu {
		color: rgba(255, 255, 255, 0.75);
		padding: 8px 12px;
		margin: 2px 8px;
		border-radius: 10px;
		font-size: 0.875rem;
		font-weight: 500;
		width: calc(100% - 16px);
		background: none;
	}

	.nav-sb-footer .item-menu:hover,
	.nav-sb-footer .nav-link.item-menu:hover {
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
	}

	.nav-sb-footer .item-menu button {
		color: inherit !important;
		background: none;
		border: none;
		padding: 0;
		font-family: var(--font);
		font-size: inherit;
		font-weight: inherit;
		cursor: pointer;
		text-align: left;
	}

	.text-label {
		font-family: var(--font);
		font-weight: 400;
		font-size: 1.2rem;
	}

	.input-search {
		background-color: #F7F7F7
	}

	.form-check-input:checked {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

	.form-check-input {
		cursor: pointer;
	}

	@media (min-width: 768px) {
		html {
			font-family: var(--font);
			font-size: 16px;
		}

		body {
			margin-bottom: 60px;
		}
	}

	@media (max-width: 767px) {
		.card-login {
			margin: 1.5rem !important;
		}

		/* ── Bottom nav bar ── */
		#sidebar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			top: auto;
			width: 100vw !important;
			height: 62px;
			min-width: unset;
			background-color: var(--color-primary);
			display: flex;
			flex-direction: row;
			align-items: stretch;
			z-index: 9999;
			box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
			overflow: hidden;
			border-radius: 0;
			padding: 0;
		}

		/* Oculta logo, separador e footer no mobile */
		#sidebar > .nav-sb-logo,
		#sidebar .nav-sb-divider,
		#sidebar .nav-sb-footer {
			display: none !important;
		}

		/* invisible-scroll vira o container horizontal principal */
		#sidebar .invisible-scroll {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			max-height: unset;
			height: 100%;
			width: 100%;
			overflow-x: auto;
			overflow-y: hidden;
			scrollbar-width: none;
			-ms-overflow-style: none;
		}

		#sidebar .invisible-scroll::-webkit-scrollbar {
			display: none;
		}

		/* Cada grupo ul fica em linha */
		#sidebar ul.nav {
			display: flex !important;
			flex-direction: row !important;
			flex-wrap: nowrap;
			align-items: stretch;
			margin: 0;
			padding: 0;
			height: 100%;
			border-top: none !important;
		}

		/* Separador sutil entre grupos */
		#sidebar ul.nav + ul.nav {
			border-left: 1px solid rgba(255, 255, 255, 0.18);
		}

		/* Cada item */
		#sidebar .nav-item {
			display: flex;
			align-items: stretch;
			margin: 0;
			padding: 0;
		}

		/* Link: ícone + label curtíssima empilhados */
		#sidebar .nav-sb-link {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0.35rem 0.8rem;
			min-width: 52px;
			height: 100%;
			width: auto;
			border-radius: 0;
			margin: 0;
			font-size: 1.05rem;
			white-space: nowrap;
			gap: 0;
		}

		#sidebar .nav-sb-link .nav-sb-label {
			margin-top: 3px;
			display: block;
			font-size: 0.6rem;
			line-height: 1.1;
			max-width: 58px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
		}

		/* Ativo no mobile: destaque sutil + dot indicator */
		#sidebar .nav-sb-link--active {
			background: rgba(255, 255, 255, 0.18) !important;
			color: #fff !important;
			position: relative;
		}

		#sidebar .nav-sb-link--active::after {
			content: '';
			position: absolute;
			bottom: 5px;
			left: 50%;
			transform: translateX(-50%);
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: #fff;
		}

		#sidebarCollapse {
			display: none;
		}

		.nav-content {
			margin-left: 0 !important;
		}

		#content {
			margin-left: 0 !important;
			padding-bottom: 70px; /* espaço para o bottom nav */
		}
	}

.invisible-scroll {
	max-height: calc(100vh - 100px);
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

	.invisible-scroll::-webkit-scrollbar {
		display: none;
	}